vue的三种常用传值方式
一、父组件向子组件传值1.使用props建立数据通道的渠道// 这是父组件// 这是子组件2 . 在子组件中通过props传递过来的数据Vue,component(‘child’,{props:[‘message’]})二、子组件向父组件传值在子组件里面定义数据 使用$emit来进行自定义事件的触发 以及数据的发送三、非父子组件传值利用一个公共的vue来进行传递值和获取值 (是用过一个公共bus这
一、父组件向子组件传值
1.使用props建立数据通道的渠道
// 这是父组件
// 这是子组件
2 . 在子组件中通过props传递过来的数据
Vue,component(‘child’,{
props:[‘message’]
})
二、子组件向父组件传值
在子组件里面定义数据 使用$emit来进行自定义事件的触发 以及数据的发送
三、非父子组件传值
利用一个公共的vue来进行传递值和获取值 (是用过一个公共bus这个bus可以是一个dom元素也可以是localStorage或者sessionStorage等等,也是用过
e
m
i
t
发
送
自
定
义
事
件
,
这
边
需
要
通
过
emit发送自定义事件,这边需要通过
emit发送自定义事件,这边需要通过on获取自定义事件中的数据。如果值很大项目比较复杂就可以用vuex来传值,集中管理状态在购物车结算的时候会用到。)
1.创建一个空的vue\var kong = new Vue();
2.在组件1中,定义
e
m
i
t
来
发
送
数
据
∗
∗
k
o
n
g
.
emit来发送数据\\**kong.
emit来发送数据∗∗kong.emit(‘test’,‘数据’)**
3.在组件2中使用
o
n
来
接
收
传
递
的
数
据
k
o
n
g
.
on来接收传递的数据 kong.
on来接收传递的数据kong.on(‘test’,function(num) {
this.getData =num;
kong.$off(“test”)
})
注:非父子传值也是可以用localstorage 来传值和取值
{
//设置值
localstorage.setItem(‘test’,‘数据’)
//获取值
localstorage.getItem(‘test’)
}
更多推荐
所有评论(0)