Vue 父子组件通信 $attrs及$listeners属性使用教程

https://blog.csdn.net/qq_33769914/article/details/87347371

https://blog.csdn.net/qq_33769914/article/details/81012431

 

上面两篇都介绍过父子组件的通信。

 

下面介绍一种新的方式，使用$attrs及$listeners属性

当我们有三个组件。A。B。C。A是父组件。B是子组件。C孙子组件。当我们A向C传值的时候我们有两种方式；

1，一般都是通过先传给B再由B传给C。这一种通过props和$emit的方式，使得组件之间的业务逻辑臃肿不堪，B组件在其中仅仅充当的是一个中转站的作用。

2，把值放在vuex里面作为共享的。但是显然这种太浪费了。

 

我们可以通过$attrs传父组件传来的，而当前页面没有接收的参数。

$listeners父组件传来的函数而当前没有通过this.$emit返回的。

 

举个例子

A 组件 (Child.vue)

<template>  <div >  <child1  :pchild1="child1"  //右边都是当前页面定义的变量或者函数，左边是接收的子组件传来的  :pchild2="child2"  v-on:test1="onTest1" //此处监听了两个事件，可以在B组件或者C组件中直接触发  v-on:test2="onTest2" >  </child1>  </div> </template> <script>  import Child1 from './Child1.vue';  export default {  data () {  return {  child1:'child1111',  child2:'child2222', };  },  components: { Child1 },  methods: {  onTest1 () {    console.log('test1 running...');  },  onTest2 () {  console.log('test2 running');  }  }  }; </script>

 

B组件 (Child1.vue)

<template>  <div >     显示{{pchild1}}、、、//这里显示child1111  <child2       v-bind="$attr"   //当前页面没有接收完父组件传来的变量。传来的所有变量减去当前props接收的，就传给了这个child2的组件      v-on="$listeners"  当前页面没有返回的父组件传来的所有的函数。所有的减去给返回值的，就传给了child2组件  </child2>  <button @click="toParent()">点击</button>  </div> </template> <script>  import Child2 from './Child2.vue';  export default { props:['pchild1']  data () {  return {   msg:'我是B'   };  }, inheritAttrs: false,  components: { Child2 },  methods: {  toParent() {    this.$emit('test1',this.msg);  },    }  }; </script>

C 组件 (Child2.vue)

<template>  <div >     显示{{pchild2}}、、、//这里显示child222     <button @click="toParent2()">点击</button>  </div> </template> <script>  export default { props:['pchild2']  data () {  return {   msg:'我是C'   };  }, inheritAttrs: false,  methods: {  toParent2() {    this.$emit('test2',this.msg);  },    }  }; </script>

 

A组件一共传了两个变量pchild1，pchild2。两个接收函数test1，test2.

组件B中props中接收了一个pchild1。所以$attr传的是剩下的那个pchild2

组件B中函数里emit回去的只有test1.所有$listener传给C组件的是剩下的那个test2

 

inheritAttrs

默认情况下父作用域的不被认作 props 的特性绑定 (attribute bindings) 将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过 (同样是 2.4 新增的) 实例属性 $attrs 可以让这些特性生效，且可以通过 v-bind 显性的绑定到非根元素上。