文档章节

vue 跨层组件通讯 $attrs $listeners

 阿豪boy
发布于 2019/11/11 22:59
字数 360
阅读 5
收藏 0

层级关系如下

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>

 

© 著作权归作者所有

粉丝 25
博文 1609
码字总数 1114981
作品 0
西安
私信 提问
Vue案例引发的「嵌套组件」通信的简单方式

我们都知道 Vue 是采用组件化开发的模式,组件化的优势在于相对独立,易于维护,可复用。你可以把项目看成许多组件的组合而成。 既然项目中存在很多的组件,而且又是相对独立的,但组件间肯定...

六小登登
2019/02/27
0
0
Vue高版本中一些新特性的使用

一、深度作用选择器( >>> ) 严格来说,这个应该是vue-loader的功能。”vue-loader”: “^12.2.0” 在项目开发中,如果业务比较复杂,特别像中台或B端功能页面都不可避免的会用到第三方组件...

大灰狼的小绵羊哥哥
2018/10/16
0
0
Vue封装三方库的运用: $attrs + $listeners

分类是学习的本质,时间分类是时间管理,知识分类是知识管理,资源分类是项目管理~~ 是什么 在封装一个插件时,大家往往会先从使用插件者能传递的数据,开始设计插件的入口,封装vue组件同理...

王火火Kavan
2019/06/17
0
0
Vue高版本中一些新特性的使用详解

一、深度作用选择器( >>> ) 严格来说,这个应该是vue-loader的功能。”vue-loader”: “^12.2.0” 在项目开发中,如果业务比较复杂,特别像中台或B端功能页面都不可避免的会用到第三方组件...

peakedness丶
2018/11/29
534
0
07、Vue.js---Vue对象的实例方法和属性

Vue对象的实例属性和方法分为全局和局部实例属性和方法。全局和局部的区别在于调用者不同。 · 局部实例属性和方法: vm | this .$方法名或属性; · 全局实例熟悉和方法: Vue .方法名或属性...

秋季长青
2018/07/18
242
0

没有更多内容

加载失败,请刷新页面

加载更多

关于docker0: iptables: No chain/target/match by that name的问题解决

由于Docker 0默认网桥的iptables策略冲突问题,将导致一些web server启动时出现如下错误: docker: Error response from daemon: driver failed programming external connectivity on endpo......

王焱君
今天
87
0
js 下载 canvas 兼容移动端

很蛋疼的问题PC上好好的, 移动端下载不了 , 貌似前端 js 生成的时 base64 格式的 图片数据,移动端无法直接下载, 但是chrome 移动端和pc端都没问题, 国产的几个浏览器全部挂了 之前的下载方式...

阿豪boy
昨天
76
0
微信小程序获取用户OpenId

1.在小程序中获得UserCode: wx.login({success: function (res) {thisApp.setData({userCode: res.code})}}) 2.在小程序中获得UserInfo: wx.getUserInfo({success...

kaition
昨天
54
0
代码生成器技术乱弹二十三,未来之野望,未实现的功能SQLTypes

在原先的Java类型系统的基础上新增SQL类型系统,有校验确保SQL类型系统兼容于Java类型系统。在生成数据库脚本时候使用SQL类型系统。

火箭船
昨天
48
0
Mybatis在插入自增字段时,会对当前对象未赋值的自增字段进行赋值

Mybatis在插入自增字段时,会对当前对象未赋值的自增字段进行赋值,如下即自动完成对id的赋值 OrderItem orderItem = new OrderItem(); System.out.println("==...

Gotcha_
昨天
42
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部