什么是实传和透传

实传就是你在组件内部进行了注册，可以在这个组件内部使用，同时你可以将嵌套组件已经注册的属性传递下去

透传是父组件传递一些在子组件没有注册的属性和没有使用的方法，实际上这些message是用于给子组件的嵌套组件使用的。

实传实例

先贴代码，

var childcom={
    props:['name'],
    template:`<div>
      <div>我是子组件  {{name}}</div>
      <grandcom v-bind="$attrs" v-on="$listeners" addition='我是中途加入的'></grandcom>
    </div>`,
     
    components: {
      'grandcom':{
        template:`<div>我是孙子组件-------<button @click="grandChangeName">改变名字</button></div>`,
        mounted(){
            console.log(this.$attrs)
        },
        methods:{
          grandChangeName(){
            this.$emit('testChangeName','kkkkkk')
          }
        }
      }
    },
methods:{
  changeName(val){
    this.name = val
  }
}
}

var vm=new Vue({
    el:'#app',
    data:{
        'name':'张三',
        'age':'30',
        'sex':'男'
    },
    components:{
        childcom,
    }
        ,
    template:`<div><childcom :name='name' :age='age' :sex='sex'></childcom></div>`,

})

如果一个父组件要传递数据给子组件的话，自然是通过子组件上的属性来实现 ，但是这个属性有区别之分

有的属性在子组件内注册了，有的没有注册，注册了的属性我们都知道能够在子组件内使用，但是没有注册的属性，去了哪里？（注意:这里的属性包含了定义的方法）

没有注册的属性会跑到两个地方，属性放到了vm.$attrs上，方法放在了vm.$listeners

这两个相当于一个容器，存储了这些未注册的内容。

这些未注册的内容有时候用处？

可以将这些未注册的内容传递给当前组件的子组件，乃至孙组件

传递方式是怎么样的？

v-bind="$attrs" v-on="$listeners"

直接将整个容器给传递进去，同时在传递这两个容器时还能够传递子组件未注册的属性，同时也是能够通过子组件的vm.$attrs访问

比如下面这段代码:

<grandcom 
v-bind="$attrs" 
v-on="$listeners" 
addition='我是中途加入的'>
</grandcom>

得到的结果如图所示

为什么使用attrs和listeners

attrs和listeners解决了父组件和后代组件之间的通信问题

attrs是一个父组件向下传递信息的过程

listeners是一个后代组件向父组件传递信息的过程

尽管这种通信解决了一类问题，但是并不意味着他好用，它的缺点是很明显的，而且不适用于开发

比如说，

vm.$attrs如果想在后代组件中访问，得知道传递数据的名字，这还得到上层组件一层一层去查找

vm.$listener后代组件也得到得到上层组件一层一层去查找对应的方法名。