第二十二天2019-01-22

组件通信-祖孙

本文将结合例子,简单讲解下vuejs文档中的实例属性:vm.$attrsvm.$listeners

碎碎念

因为项目中大多用Vuex来通信,但是用多了之后感觉简单的组件之间的通信再用构造vuex的mutation,写起来比较费,当然父子之间的通信肯定是用emit更实在。

写个“栗子”

  • 三个组件:grandfather > father > son

    祖宗组件

    Vue.component('grandfather', {
    props: [],
    template:
    `<div>
    <father
    :getGrandsonData="grandfatherData" // 传值
    @getGrandsonEvent="grandfatherEvent" // 事件
    ></father>
    </div> `
    data: function () {
    return {
    grandfatherData: "hello, i'm your grandfather"
    }
    },
    methods: {
    grandfatherEvent (val) {
    // 这里接到了“hello, i'm your grandson”
    console.log(val) // hello, i'm your grandson
    }
    }
    })

父亲组件

Vue.component('father', {
props: [], // 注意这里props不需要再父组件声明
template:\`
<div>
<grandson
v-bind="$attrs"
v-on="$listeners"
></grandson> \`
</div>
})

孙子组件

Vue.component('grandson', {
props: [],
template:`
<input
type="text"
v-model="grandsonMsgToGrandfather"
@input="sendToGrandfatherEvent"
>{{$attrs.grandfatherData}}</div> `
data: function () {
return {
grandsonMsgToGrandfather: "hello, i'm your grandson"
}
},
method: {
sendToGrandfatherEvent () {
this.$emit('getGrandsonEvent', sonMsgToGrandfather )
}
}
})

注意:这里的代码并没有验证过,只是大概写个简单的demo

上文档

vm.$attrs

vm.$attrs
类型:{ [key: string]: string }
只读
详细:
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind=”$attrs” 传入内部组件——在创建高级别的组件时非常有用。

vm.$listeners

vm.$listeners
类型:{ [key: string]: Function | Array<Function> }
只读
详细:
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件——在创建更高层次的组件时非常有用。

参考

[1]. https://cn.vuejs.org/v2/api/#vm-attrshttps://cn.vuejs.org/v2/api/#vm-listeners
[2]. vue的通信方式(二)—祖父孙三个级别的之间的隔代通信

—end—

文章作者: lmislm
文章链接: http://lmislm.com/2019/01/22/2019-01-22/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog