vue中传值的方式,vue通信、传值的多种方式(详细)
本文主要介绍了vue值传递的十二种方法的总结，并通过实例代码进行了详细介绍。对大家的学习或工作都有一定的参考价值。有需要的朋友下面和边肖一起学习。
目录
I .通过世代相传II。从儿子传给父亲。兄弟组件之间的通信(总线)IV。ref/refs(父子元件之间的通信)与Vuex通信VI。$parent VII。会话存储传输值VIII。路由传输值IX。祖孙$attrs X .孙传祖用$听众XI。承诺传输参数XII。
一.父传子传递
(1)在父组件的子组件的标签上绑定一个属性，挂载要传输的变量。
(2)通过子组件中的props接收数据，可以是数组，也可以是对象。接收到的数据可以直接用props:[" property name "]props:{ property name:data type }代码示例：。
//父组件
模板
差异
I父组件/i
！-页面使用-
son :data=name/son
/div
/模板
脚本
从导入儿子。/son . vue ；//导入父组件
导出默认值{
组件：{son }，//注册组件
名称：“父组件”，
data() {
返回{
名称：“Frazier”，//父组件定义变量
};
},
};
/脚本
//子组件
模板
div{{data}}/div
/模板
脚本
导出默认值{
组件：{ }，
名称：“子组件”，
道具：[数据]，
};
/脚本
二.子传父传递
(1)在父组件的子组件标签上自定义一个事件，然后调用所需的方法。
(2)父组件中定义的事件由此触发。$emit ("event ")在子组件的方法中，数据作为参数代码示例：传递
//父组件
模板
差异
I父组件/i
！-页面使用-
Son @lcclick=lcclick/son//自定义活动
/div
/模板
脚本
从导入儿子。/son . vue ；//导入父组件
导出默认值{
组件：{son }，//注册组件
名称：“父组件”，
data() {
return { }；
},
方法：{
lcclick(){
警报(“子到父”)
}
},
};
/脚本
//子组件
模板
差异
Button @click=lcalter 单击我/button
/div
/模板
脚本
导出默认值{
组件：{ }，
名称：“子组件”，
方法：{
lcalter(){
这个。$emit(lcclick)//通过emit触发事件
}
},
};
/脚本
三.兄弟组件通信（bus总线）
(1)在src中新建一个Bus.js文件，然后导出一个空的vue实例。
(2)数据传输方面，引入Bus.js，然后通过总线发送事件。e m i t("事件名称"，"参数")。数据由emit(“事件名”，“参数”)发送，数据由emit(“事件名”，“参数”)发送。数据是
(3)在接收数据端引入Bus.js，然后传递Bus。$on("事件名称"，(数据)={数据是接收的数据})
图片示例：
四.ref/refs（父子组件通信）
(1)如果1)ref用在普通DOM元素上，引用指向DOM元素；如果用在子组件上，引用指向组件实例，
(2)可以直接调用组件的方法或者通过实例访问数据。也可以看作是子组件向父组件传递值的一种代码示例：。
//父组件
模板
差异
button @click=说你好说你好/button
child ref=childForRef/child
/div
/模板
脚本
从导入子级。/child.vue
导出默认值{
组件：{ child }，
data () {
返回{
childForRef: null，
}
},
已安装(){
this.childForRef=this。$ refs.childForRef
console . log(this . child forref . name)；
},
方法：{
说你好(){
this.childForRef.sayHello()
}
}
}
/脚本
//子组件
模板
divchild /div的内容
/模板
脚本
导出默认值{
data () {
返回{
姓名：“我是孩子”，
}
},
方法：{
说你好(){
console . log( hello )；
alert( hello )；
}
}
}
/脚本
五.Vuex通信
组件被分派给动作，动作是异步操作，然后动作被提交给突变，突变通过逻辑操作改变状态，从而同步到组件并更新其数据状态代码示例：。
//父组件
模板
div id=应用程序
儿童A/
儿童B/
/div
/模板
脚本
从导入。/child a //导入组件
从导入ChildB。/ChildB //导入B组件
导出默认值{
组件：{ChildA，ChildB} //注册组件
}
/脚本
//子组件a
模板
div id=childA
H1我是组件a /h1。
我让组件B接收数据/按钮
由于p单击了B，信息发生了变化：{{BMessage}}/p
/div
/模板
脚本
导出默认值{
data() {
返回{
a消息：“你好，组件b，我是组件a”
}
},
计算值：{
BMessage() {
//从商店中获取的组件B的数据存储在这里。
归还这个。$store.state.BMsg
}
},
方法：{
转换(){
//触发receiveAMsg将组件a的数据存储到存储中。
这个。$store.commit(receiveAMsg ，{
AMsg:这个。信息
})
}
}
}
/脚本
//子组件B
模板
div id=childB
H1我是b /h1成分。
我让组件A接收数据/按钮
p点击了A，我的信息发生了变化：{{AMessage}}/p
/div
/模板
脚本
导出默认值{
data() {
返回{
b消息：“你好，组件a，我是组件b”
}
},
计算值：{
AMessage() {
//从存储中获取的组件A的数据存储在这里。
归还这个。$store.state.AMsg
}
},
方法：{
转换(){
//触发receiveBMsg将组件b的数据存储到存储中。
这个。$store.commit(receiveBMsg ，{
BMsg:这个。b消息
})
}
}
}
/脚本
//vuex
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
常量状态={
AMsg: ，
BMsg:“”
}
常量突变={
receiveAMsg(状态，有效负载){
//存储状态A组件的数据
状态。AMsg=有效载荷。窝前斜面内侧
},
receiveBMsg(状态，有效负载){
//存储状态B组件的数据
状态。BMsg=有效负载。凸轮限位装置
}
}
导出默认的新Vuex。商店({
状态，
突变
})
六.$parent
Parent可以获取父组件实例，但然后通过该实例访问父组件的属性和方法。它还有一个兄弟父组件，可以获取父组件实例，然后通过该实例访问父组件的属性和方法。它还有一个兄弟根，可以获得根组件实例。代码示例：
//获取父组件的数据
这个。$parent.foo
//写入父组件的数据
这个。$parent.foo=2
//访问父组件的计算属性
这个。$parent.bar
//调用父组件的方法
这个。$parent.baz()
//在子组件传递给父组件的例子中，可以使用这个。$parent.getNum(100)将值传递给父组件。
七.sessionStorage传值
SessionStorage是浏览器的全局对象，关闭页面时会清除其中存储的数据。有了这个功能，我们可以在所有页面上共享一个数据。代码示例：
//将数据保存到会话存储
sessionStorage.setItem(key ， value )；
//从sessionStorage获取数据
let data=session storage . getitem( key )；
//从sessionStorage中删除保存的数据
session storage . remove item( key )；
//从sessionStorage中删除所有保存的数据
session storage . clear()；
注意：它存储键值对，只能是字符串类型。如果要存储对象，需要使用Letobj=json.stringify (obj)将其转换为字符串后存储(使用时让obj=JSON.parse(objStr)将其解析为对象)。
推荐一个库good-storage，封装了sessionStorage，可以直接用它的API存储对象。
//本地存储
storage.set(key，val)
storage.get(key，def)
//会话存储
storage.session.set(key，val)
storage.session.get(key，val)
八.路由传值
使用问号传值
A页面跳转B页面时使用这个r o u t e r p u s h(/B？n a m e=d a n s e e k ) B页面可以使用t h i s . router.push(/B？name=danseek) B页面可以使用这个router.push(/B？name=danseek)B页面可以使用this.route.query.name来获取A页面传过来的值
上面要注意路由器和途径的区别使用冒号传值
配置如下路由：
{
路径："/b/:名称",
姓名： b ，
组件：()=导入( ./views/b . vue )
},
在B页面可以通过这个. route.params.name来获取路由传入的名字的值
使用父子组件传值
由于路由器视图本身也是一个组件，所以我们也可以使用父子组件传值方式传值，然后在对应的子页面里加上道具，因为类型更新后没有刷新路由，所以不能直接在子页面的安装好的钩子里直接获取最新类型的值，而要使用看
路由器视图：type= type /路由器视图
//子页面
道具：[type]
观察：{
type(){
//console.log(在这个方法可以时刻获取最新的数据：type=，this.type)
},
},
九.祖传孙 $attrs
正常情况下需要借助父亲的小道具作为中间过渡，但是这样在父亲组件就会多了一些跟父组件业务无关的属性，耦合度高，借助$attrs可以简化些，而且祖跟孙都无需做修改祖组件：
模板
部分
父母姓名=祖父母性别=男年龄=88 爱好=代码@ say know= say know /家长
/部分
/模板
脚本
从导入父级。/家长
导出默认值{
姓名：祖父母，
组件：{
父母
},
data() {
返回{}
},
方法：{
sayKnow(val){
控制台。日志(瓦尔)
}
},
已安装(){
}
}
/脚本
父组件
模板
部分
p父组件收到/p
p祖父的名字：{{name}}/p
children v-bind= $ attrs v-on= $ listeners /children
/部分
/模板
脚本
从导入孩子。/儿童
导出默认值{
姓名：家长，
组件：{
孩子们
},
//父组件接收了姓名，所以名字值是不会传到子组件的
道具：[名字],
data() {
返回{}
},
方法：{},
已安装(){
}
}
/脚本
子组件
模板
部分
p子组件收到/p
p祖父的名字：{{name}}/p
p祖父的性别：{{sex}}/p
p祖父的年龄：{{age}}/p
p祖父的爱好：{{hobby}}/p
button @click=sayKnow 我知道啦/按钮
/部分
/模板
脚本
导出默认值{
姓名：孩子，
组件：{},
//由于父组件已经接收了名字属性，所以名字不会传到子组件了
道具：[性别,年龄,爱好,姓名],
data() {
返回{}
},
方法：{
sayKnow(){
这个. emit(sayKnow ，我知道啦)
}
},
已安装(){
}
}
/脚本
十.孙传祖使用$listeners
文字内容同第九个
祖组件
模板
div id=应用程序
children-one @ event one= event one /children-one
{{ msg }}
/div
/模板
脚本
从以下位置导入孩子./src/components/children.vue
导出默认值{
名称："应用程序",
组件：{
儿童一号，
},
data() {
返回{
邮件：""
}
},
方法：{
eventOne(值){
this.msg=值
}
}
}
/脚本
父组件
模板
差异
儿童-两个v-on= $ listeners /儿童-两个
/div
/模板
脚本
从导入两个孩子/childrenTwo.vue
导出默认值{
姓名：儿童一号，
组件：{
两个孩子
}
}
/脚本
子组件
模板
差异
button @click=setMsg 点击传给祖父/按钮
/div
/模板
脚本
导出默认值{
姓名：孩子，
方法：{
setMsg() {
这个emit(eventOne ， 123 )
}
}
}
/脚本
十一.promise传参
承诺中分解如何传递多个参数
//类似与这样使用，但实际上后面两个参数无法获取
承诺=新承诺((解决，拒绝)={
设a=1
设b=2
设c=3
解决(甲、乙、丙)
})
promise.then((a，b，c)={
console.log(a，b，c)
})
Resolve()只能接受和处理一个参数，多余的参数会被忽略。
如果您想将数组或对象用于多个。数组
承诺=新承诺((解决，拒绝)={
解决([1，2，3])
})
promise.then((arr)={
console.log(数组[0]，数组[1]，数组[2])
})
对象
承诺=新承诺((解决，拒绝)={
解决({a:1，b:2，c:3})
})
promise.then(obj={
console.log(obj.a，obj.b，obj.c)
})
十二.全局变量
定义一个全局变量，将其直接赋给有价值的组件，并直接在所需的组件中使用。详情请看我的博客。
只需点击博客链接，全局变量。
关于vue价值传递的十二种方法的总结，本文到此为止。更多关于vue价值传递的信息，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。