Vue基于$attrs及$listeners实现隔代通信-阿里云开发者社区

Vue基于$attrs及$listeners实现隔代通信

2022-09-15 101

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue基于$attrs及$listeners实现隔代通信

所谓隔代通信就是A 与C的通信

A -> B -> C

d24.3.png

代码实例

A.vue

<template>

<div id="app">

<b-child
nameToB="nameToB"
nameToC="nameToC"
@buttonClick="buttonClick"
>
</b-child>
</div>
</template>

<script>
import BChild from "./B.vue";

export default {
data() {
return {};
},

components: { BChild },

methods: {
buttonClick() {
console.log("buttonClick...");
}
}
};
</script>

B.vue

<template>
    <div>
        <h1>B组件</h1>
        <p>name: {
        {nameToB}}</p>
        <p>$attrs: {<!-- -->{$attrs}}</p>
        <hr>
        <!-- C组件中能直接触发buttonClick的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
        <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
        <c-child v-bind="$attrs&#34; v-on&#61;&#34;$listeners"></c-child>

    </div>
</template>

<script>
 import CChild from './C.vue';

 export default {
    props: ['nameToB'],
    
    components: { CChild },

    data () {
        return {};
    },

    // inheritAttrs: false,
 };
</script>

C.vue

<template>
    <div>
        <h1>C组件</h1>
        <p>name: {
        {nameToC}}</p>
        <p>$attrs: {<!-- -->{$attrs}}</p>
        <button @click="buttonClick">点击C按钮</button>
    </div>
</template>

<script>
    export default {
    // inheritAttrs: false,

        props: ['nameToC'],

        data () {
            return {};
        },
        
        methods: {
            buttonClick(){
                this.$emit('buttonClick');
            }
        }
    };
</script>