vue2组件通信之$attrs/$listeners

包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外)。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定(class和style除外),并且可以通过v-bind="$attrs"传入内部组件--在创建高级别的组件时非常有用。

子组件props中声明foo

<div>{{$attrs.foo}}</div>    

父组件中

<child foo="foo"></child>

祖孙传值

祖先组件a组件中传值给孙组件

<parent msg="传给孙子"></parent>

在父级组件parent组件中通过v-bind把数据传给孙组件

<c v-bind="$attrs"></c>

在孙组件中使用

<div>{{$attrs.msg}}</div>

$listeners用法与$attrs一致传递方法使用

在祖先组件中向父组件传入方法

<parent @foo="foo"></parent>

methods:{
foo(){

console.log("方法传递")

}

}

在父级组件parent组件中通过v-bind把数据传给孙组件

<c v-on="$listeners"></c>

在孙组件中使用

mounted{

    change(){

        this.$emit("foo")

}

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容