vue 跨层组件通讯 $attrs $listeners

原创
2019/11/11 22:59
阅读数 339

 

原文链接: vue 跨层组件通讯 $attrs $listeners

上一篇: vue 计算属性传参

下一篇: vue 跨层组件通讯 provide inject

层级关系如下

A需要向C传递数据, 并监听C发出的事件

 

点击按钮后, A接受C发过来的事件修改数据, ABC所有视图均发生变化

 

A

对于A来说正常传递参数和监听事件即可

<template>
  <div>
    <h1>A</h1>
    <h3>{{a}} - {{b}} - {{c}}</h3>
    ---
    <B :a="a" :b="b" :c="c" @text-change="change"></B>
  </div>
</template>

<script>
  import B from './B'

  export default {
    components: {
      B
    },
    data() {
      return {
        a: "Aa",
        b: "Ab",
        c: "Ac"
      }
    },
    methods: {
      change(val) {
        console.log("A change, ", val)
        this.b = val
      }
    }
  }
</script>

 

B

对于中间层B来说, 可以有多个中间层, 但是要确保B中的props没有劫持到C需要的数据, 否则$attrs传递给C的数据会有残缺

<template>
  <div>
    <h1>B</h1>
    <h3>{{a}}</h3>
    <h3>{{$attrs}}</h3>
    ---
    <C v-bind="$attrs" v-on="$listeners"></C>

  </div>
</template>

<script>
  import C from './C'

  export default {
    components: {
      C
    },
    props: ['a'],
  }
</script>

 

C

对于接受方来说, 只需要正常使用并发出事件即可

<template>
  <div>
    <h1>C</h1>
    <h3>{{c}}</h3>
    <h3>{{$attrs}}</h3>
    <button @click="change">change</button>
  </div>
</template>

<script>
  export default {
    props: ['c'],
    methods: {
      change() {
        // 直接赋值不会触发更新
        // this.$attrs['b'] = 'Cb'

        console.log("C change")
        this.$emit('text-change', "Cb")
      }
    }
  }
</script>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部