首页 > 其他 > 详细

vue的三种通信方式

时间:2019-02-13 00:15:44      阅读:84      评论:0      收藏:0      [点我收藏+]

标签:spa   method   三种   接收数据   ont   对象   s函数   事件   cli   

一 确定组件关系
二 使用第一步确定的组件关系在下面找到使用方法
1 父子通信(子组件使用父组件数据渲染)

a) 在 子组件 中添加props
props: [自定义prop名字]
b) 在子组件中把自定义prop当data使用即可
c) 找到父组件模板 中的 子组件标签,添加属性
<子组件标签 :自定义prop名字="父组件data中的数据"></子组件标签>

 

2 子父通信(子组件想要发送数据给父组件时)

a) 在子组件中对应的元素上绑定相关事件,在事件函数中触发自定义事件
<元素 @click="子组件methods函数"></元素>
{
methods: {
函数 () {
this.$emit(‘自定义事件名‘, 数据)
}
}
}
b) 在父组件中的methods里添加数据处理函数
{
methods: {
处理数据函数 (data) {
data就是$emit传递过来的数据
}
}
}
c) 在父组件组件模板中找到子组件标签,然后在子组件标签上绑定自定义事件
<子组件标签 @自定义事件名="第二步中创建的函数名"></子组件标签>

 

3 非父子通信(一个组件想要传递数据到另一个组件时)

a) 创建一个公共的实例对象
const bus = new Vue()
或者
const EventHub = new Vue()
b) 在要传递数据的组件中添加methods,并给对应元素绑定事件执行该函数
{
methods: {
函数 () {
// 触发自定义事件
bus.$emit(‘自定义事件名‘, 数据)
}
}
}
<元素 @click="函数">
c) 在要接收数据的组件中添加created,在created函数中添加监听
created () {
bus.$on(‘自定义事件名‘, (data) => {
// data就是传递来的数据
})
}

 

vue的三种通信方式

标签:spa   method   三种   接收数据   ont   对象   s函数   事件   cli   

原文:https://www.cnblogs.com/zmdblog/p/10367567.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号