成都创新互联网站制作重庆分公司

vue组件通信-创新互联

vue组件通信分为横向和纵向。

创新互联专注于合江网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供合江营销型网站建设,合江网站制作、合江网页设计、合江网站官网定制、微信小程序服务,打造合江网络公司原创品牌,更为您提供合江网站排名全网营销落地服务。

**纵向**

1. props 和 $emit

props:接收来自父组件的数据

$emit:触发事件







Document




子组件向父组件传值
1、自定义事件
2、子组件原生事件
3、原生事件的处理函数中通过$emit触发自定义事件
注:子组件不能修改props中的值,否则报错,可通过子组件自己的数据接收props中的值来解决

2. $parent 和 $children

后代组件可以通过$parent.$parent.$parent这种形式跨级通信

父组件可以通过$children[0].$children[0]这种形式跨级通信,如果有多个子组件,索引不好控制







Document




$parent, $children, $root, $parent.$parent
非响应式,如果有多个直接子组件

3. $attrs 和 $listeners

后代组件从$attrs获取父组件传给后代组件的数据

后代组件通过$emit触发$listeners的事件将数据传给父组件







Document




1、$attrs收集属性
2、$listeners收集事件

4. provide 和 inject

父组件向后代组件单向传递数据







Document







单向

**横向**

1. 数据总线 

用一个中间变量保存数据

 $on绑定事件

 $emit触发事件







Document














Document








创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


文章标题:vue组件通信-创新互联
分享网址:http://cxhlcq.com/article/dsoose.html

其他资讯

在线咨询

微信咨询

电话咨询

028-86922220(工作日)

18980820575(7×24)

提交需求

返回顶部