关于vue组件事件属性穿透详解

// 子组件
<template>
 <div>
   <input type="text" name="" id="" v-bind="$attrs" v-on='listeners'/>
 </div>
</template>
 props: {
  test: {
   type: String,
   default: '123456'
  }
 },
 created () {
  console.log(`props:%o`, this.$props) // {test: '测试'}
  console.log('attrs:%o', this.$attrs) // {value: '测试'}
 },

 // 父组件
 <myInput :value="value" :class="class_" :style='style' :test='test' @input1="input"/>
  data () {
  return {
   style: {
    color: 'red'
   },
   value: '测试',
   class_: 'test',
   test: '测试'
  }
 }

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
 puted: {
  listeners () {
   return {
    ...this.$listeners,
    // 狼蚁网站SEO优化写需要从子组件事件传值到从父组件中的
    input: e => {
     this.$emit('input1', e.target.value)
    }
   }
  }
 },