vue给组件传递参数,vuex组件传值
本文主要介绍vue中组件价值传递的分析。文章基于vue的相关资料，详细介绍了该课题，有一定的参考价值，有需要的小伙伴可以参考一下。
目录
一、正向价值转移验证书写道具验证更多验证二、验证。反向值传递自定义事件实现反向值传递III。兄弟值传输方式/兄弟值传输低(理解)中央事件总线eventBus前言：
只要项目做好了，组件之间的价值转移是必然的，那么如何才能完成组件之间的价值转移呢？我总结了以下几点。如有不足，请补充。
一、正向传值
基本写法：
道具：【“接收变量1”，“接收变量2”。]
使用：
1，在需要接收数据的子组件中，定义props设置接收变量
模板
差异
！-2.直接用它作为变量-
zizizizizizizizizizi-{ { title } }
/div
/模板
脚本
导出默认值{
//1.定义接收参数。
道具：[标题]
}
/脚本
风格
/风格
2，父组件传递
在调用子组件的地方，父组件向接收到的数据上传一个值。
模板
差异
fufuffufufuf - {{text}}
！-3.子组件接收父组件的数据-
子：title=text/
Zib/
/div
/模板
脚本
从导入Zi。/zi.vue
从导入Zib。/zib.vue
导出默认值{
data(){
返回{
正文：‘你好，我是fufuffu的变量！
}
},
组件：{
Zi，Zib
}
}
/脚本
风格
/风格
验证写法 props验证
也就是说，当值向前传递时，有时需要限制传递数据的格式类型。传统的建议书编写方法可以传递任何内容，但是如果需要限制，那么我们可以使用props验证方法来验证forward值返回的数据格式。
语法：
道具：{
您定义的可接受数据变量：您想要的数据类型。
}
模板
差异
！-2.直接用它作为变量-
zizizizizizizizizizi-{ { title 6 } }
/div
/模板
脚本
导出默认值{
//1.定义接收参数。
//props:[title]
//道具验证
道具：{
标题：数字
}
}
/脚本
风格
/风格
注意：
建议验证是在我们传递参数时对数据格式和类型的验证。即使传递的数据类型不符合我们的规则，从用户的角度来看也不会影响显示，但是控制台上会有警告提示。
更多验证
1，多种类型
道具：{
标题：[数字，字符串]
}
2，默认值
//默认值
道具：{
标题：{
//类型
类型：字符串，
//默认值
默认值：“我是默认值”
}
}
二、逆向传值
子组件将数据传递给父组件。
默认情况下，不允许反向值转移。应该由自定义事件来完成。
自定义事件
这个。$emit(自定义事件名称，"传递给自定义事件的数据")
实现逆向传值
1，因为逆向传值默认不允许，需要通过事件来触发一个自定义事件抛出
代码：
模板
差异
齐兹齐兹齐兹
Button @click=btn()单击反向值转移/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
文本：“我是子组件的变量”
}
},
方法：{
btn(){
这个。$emit(btn ，this.text)
}
},
}
/脚本
风格
/风格
2，在父组件中接收子组件抛出的自定义事件
模板
差异
fufufufuufuf - {{futext}}
Zi @btn=fufun/
/div
/模板
脚本
从导入Zi。/zi.vue
导出默认值{
data() {
返回{
未来文本：“”
}
},
组件：{
后方地带
},
方法：{
富芬(val){
console . log(val)；
this.futext=val
}
}
}
/脚本
风格
/风格
ref的方式完成：
只需将ref绑定到组件。
三、同胞传值/兄弟传值
low的方式（了解）
两个兄弟组件需要传输数据。组件A将值反向传输到父组件，父组件将值正向传输到组件B。
中央事件总线 eventBus
中央事件总线是组件上方的一个空vue实例，我们需要它来传递来自同胞的值。
event文件夹用于存储中央eventBus的这个实例。在新创建的文件夹和文件之间创建一个空的vue实例//1，以创建中央事件总线。
从“vue”导入Vue
导出默认新Vue
抛出
方法：{
fun(){
eventBus。$emit(apao ，this.ziatext)
}
}
接收
$on()侦听实例上的自定义事件。
$on("您想收听的自定义时间是什么"，()="{
控制台.日志(val)
})
脚本
//1，参考中央事件总线
从“@/eventBus”导入eventBus
导出默认值{
//2、通过生命周期的hook函数调用$on来监控自定义事件的强度
已安装(){
eventBus。$on(apao ，(val)={
console . log(val)；
})
}
}
/脚本
关于vue组件价值转移分析的这篇文章到此为止。有关vue组件价值转移的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。