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

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

A -> B -> C

  

 

  
1
 

代码实例
A.vue

<template>
  <div id="app"> <!-- 此处监听了事件，可以在C组件中直接触发 --> <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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

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" v-on="$listeners"></c-child> </div>
</template>

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

 export default { props: ['nameToB'], components: { CChild }, data () { return {}; }, // inheritAttrs: false,
 };
</script>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
 

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>

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
 

最终，通过B实现了A与C的通信

参考
Vue v2.4中新增的$attrs及$listeners属性使用教程

文章来源: pengshiyu.blog.csdn.net，作者：彭世瑜，版权归原作者所有，如需转载，请联系作者。

原文链接：pengshiyu.blog.csdn.net/article/details/101174233