组件传值

隔代传值

将调用组件时的组件标签上绑定的非props的特性(class和style除外)向下传递。
在子组件中应当添加 ==inheritAttrs: false== (避免父作用域的不被认作props的特性绑定应用在子组件的根元素上)。
vm.$attrs
- 包含了父作用域中不作为prop被识别的特性。
- 当一个组件没有声明任何prop时，包含所有父作用域的绑定通过v-bind="$attrs"传入内部组件

例子

//父组件
<child notprops='123' :name=name >

// 子组件
<span></span> // 展示 {"notprops":"123"}

<script>
inheritAttrs: false,
</script>

例子

// grandfather
<father :name=name />
<script>
export default{
    data(){return {
        name: 'wy'
    }}
}
</script>

// father
<child v-bind="$props" />

<script>
export default{
    data(){return {}},
    props:['name']
}
</script>

// child
<span> </span> // 显示wy

<script>
export default{
    data(){return {}},
    props:['name']
}
</script>

3. v-bind ="$listeners"

将组组件标签自定义事件向下传递
子组件（孙子组件）可以直接通过 this.$emit(eventName)方式调用
vm.$listeners 包括了父作用域中（不含 .native）的v-on监听事件可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
==vue3 弃用== vue3中 $sttrs和$listeners合并
例子 vue2

// grandFather
<Father @fun="fun" />
<script>
    methods:{
        fun(){
            console.log('test')
        }
    }
</script>

// father
<child v-on="$listeners" />

//Child
mounted(){
    this.$emit('fun')
}

// 我是父组件
<Child v-bind:title.sync="doc.title"></Child>

// 我是子组件
this.emit('update:title',newTitle)