vue组件通信 $attrs/$listeners

  如上图所示 $attrs 表示没有继承数据的对象，格式为 {属性名：属性值}。Vue2.4 提供了 $attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。

  简单来说：$attrs 与 $listeners 是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners 里存放的是父组件中绑定的非原生事件。

1、简介

• 多级组件嵌套需要传递数据时，通常使用的方法是通过 vuex。
• 但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。为此 Vue2.4 版本提供了另一种方法---- $attrs/$listeners

2、$attrs

1. 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。
2. 当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind=“$attrs” 传入内部组件。通常配合 interitAttrs 选项一起使用。

有关 interitAttrs 详情可见 博客园鲁小风lyf 的文章vue组件的inheritAttrs属性

3、$listeners

1. 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。
2. 它可以通过 v-on=“$listeners” 传入内部组件。

4、接下来我们看看跨级通信的例子

	// index.vue
	<template>
	  <div>
	    <h2>浪里行舟</h2>
	    <child-com1
	      :foo="foo"
	      :boo="boo"
	      :coo="coo"
	      :doo="doo"
	      title="前端工匠"
	    ></child-com1>
	  </div>
	</template>
	<script>
	const childCom1 = () => import("./childCom1.vue");
	export default {
	  components: { childCom1 },
	  data() {
	    return {
	      foo: "Javascript",
	      boo: "Html",
	      coo: "CSS",
	      doo: "Vue"
	    };
	  }
	};
	</script>

	// childCom1.vue
	<template class="border">
	  <div>
	    <p>foo: {{ foo }}</p>
	    <p>childCom1的$attrs: {{ $attrs }}</p>
	    <child-com2 v-bind="$attrs"></child-com2>
	  </div>
	</template>
	<script>
	const childCom2 = () => import("./childCom2.vue");
	export default {
	  components: {
	    childCom2
	  },
	  inheritAttrs: false, // 可以关闭自动挂载到组件根元素上的没有在 props 声明的属性
	  props: {
	    foo: String // foo 作为 props 属性绑定
	  },
	  created() {
	    console.log(this.$attrs); 
	    // { "boo": "Html", "coo": "CSS", "doo": "Vue", "title": "前端工匠" }
	  }
	};
	</script>

// childCom2.vue
	<template>
	  <div class="border">
	    <p>boo: {{ boo }}</p>
	    <p>childCom2: {{ $attrs }}</p>
	    <child-com3 v-bind="$attrs"></child-com3>
	  </div>
	</template>
	<script>
	const childCom3 = () => import("./childCom3.vue");
	export default {
	  components: {
	    childCom3
	  },
	  inheritAttrs: false,
	  props: {
	    boo: String
	  },
	  created() {
	    console.log(this.$attrs); 
	    // {"coo": "CSS", "doo": "Vue", "title": "前端工匠" }
	  }
	};
	</script>

	// childCom3.vue
	<template>
	  <div class="border">
	    <p>childCom3: {{ $attrs }}</p>
	  </div>
	</template>
	<script>
	export default {
	  props: {
	    coo: String,
	    title: String
	  }
	};
	</script>

** 如上图所示 $attrs 表示没有继承数据的对象，格式为 {属性名：属性值}。Vue2.4 提供了 $attrs , $listeners 来传递数据与事件，跨级组件之间的通讯变得更简单。**

简单来说：$attrs 与 $listeners是两个对象，$attrs 里存放的是父组件中绑定的非 Props 属性，$listeners 里存放的是父组件中绑定的非原生事件。

5、使用

      <el-table
        ref="elTable"
        :height="tableHeight"
        v-bind="$attrs"
        v-on="$listeners"
        :data="tableData"
      >