004.(多级)组件通信

Posted 2021-07-22 Ruovan

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了004.(多级)组件通信相关的知识，希望对你有一定的参考价值。

多级组件通信

grand -> father-> son

01. `$props`

使用 v-bind="$props" ，可以

将当前组件的 props 中的所有属性下发给它的子组件
子组件需要在其 props 属性中接收这些属性

// grand组件
<father :title="title" :name="name"></father>


// father组件通过props接收参数
<script>
    export default {
        // 通过props属性接受的参数都存储在 $props 中
        props: {
            title: {
                type: String
            }
        },
        mounted(){
            console.log(this.$props) // title
        }
    }
</script>
// 通过 $props 可以将 props中的所有属性传递给 son组件
<son v-bind="$props"></son>


// son组件:再通过props接收这些参数
<script>
    export default {
        props: {
            ...
        }
    }
</script>

02. `$attrs`

使用 v-bind="$attrs"

可以在子组件中接收父组件下发的，未被 props 接收的参数
- 这时，还需要给子组件添加 inheritAttrs: false （可以避免子组件的根元素继承父组件传递的属性）
  - 即：在子组件里没有用 props 接收的参数，会被子组件的根元素接受并显示为根元素的属性
  - 而设置这个 inheritAttrs 属性为false可以去掉这个默认行为
- 但是，可以用 $attrs 再显示这些参数
  - class 和 style 除外

// grand组件
<father :title="title" :name="name"></father>

// father组件
<script>
    export default {
        inheritAttrs: false, // 可以避免根元素继承属性
        // 如果不设置这个属性，那么father组件的根元素会被渲染为
        // <div title="title的具体值" name="name的具体值">...</div> --- 具体可通过F12查看
        
        // 没有通过props接收的参数，可以用 this.$attrs 获取到
        mounted(){
            console.log(this.$attrs) // title、name
        }
    }
</script>
// 通过 $attrs 可以将这些所有属性传递给 son组件
<son v-bind="$attrs"></son>

// son组件:可以通过props接收这些参数（也可以再次用$attrs）
<script>
    export default {
        props: {
            ...
        }
    }
</script>

03. `$listeners`

使用 v-on="$listeners" ，可以

用来接收父组件里传过来的 v-on 事件
但通过.native 绑定的原生事件是没用的

// grand组件
<father @func1="handleFunc1" @func2="handleFunc2"></father>

// father组件
<script>
export default {
    mounted(){
        // 可以用 $listeners 接收来自父组件的所有非原生事件函数
        console.log(this.$listeners) // func1、func2
        this.$listeners.func1() // 使用方法1
    }
}
</script>
// 通过 v-on="$listeners" 可以将其父组件的事件 传给son组件
<son v-on="$listeners" @fun3="handleFunc3"></son>

// son组件
<script>
export default {
    mounted() {
        // 获取来自其父组件的所有事件,这里获取的事件就包括 grand的事件和father的事件
        console.log(this.$listeners) // func1、func2、func3
        this.$emit('func2') // 使用方法2
    }
}
</script>