vue组件间参数传递的方法,vue之间的传值方式
本文主要详细介绍了vue组件之间的值传递方法。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
一个父子组件传输值，两个父子组件传输值，三个兄弟组件传输值，四个$parent /$children和ref摘要
一丶父子组件传值
首先，将父组件的一个变量绑定到父组件中子组件的自定义属性。
模板class=父亲
子级：自定义属性名=父组件的变量/子级
模板
可以在子组件的props属性中取出父组件给定的值。props中的变量用法和data中的完全一样，只是值的来源不同。
导出默认值{
姓名：孩子，
道具：[自定义属性名]，
data() {}
}
二丶子父组件传值
首先，将父组件的函数绑定到父组件中子组件的自定义属性。
模板class=父亲
child @ custom event= parent handler
模板
导出默认值{
姓名：父亲，
data() {}
方法：{
{
//参数：获取子组件触发事件($emit)时传递的数据。
}
}
})
在子组件中，这个。$emit ("parents handler "，这个。数据)触发父组件中的函数来传递参数。
三丶兄弟组件传值
事件总线：
就是打造一个事件中心，相当于中转站，可以用来收发事件。
创建一个全局空Vue实例：eventBus
从“Vue”导入Vue；
Const eventBus=new Vue() //创建事件总线
导出默认事件总线；
特定页面使用$emit发布事件-传递值。
从“@u/eventBus”导入eventBus
eventBus。$emit(发送，你好)
特定页面使用$on来订阅事件-接收组件值。
从“@u/eventBus”导入eventBus
eventBus。$on(send ，msg={
Console.log(msg) //控制台输出hello
}
注意：$on首先侦听，一旦$emit发布了事件，所有组件都可以侦听事件$on。因此，在获得参数之前，必须对其进行监控。例如，在父组件中，$emit事件被放在挂载的钩子函数中，然后在创建子组件并且$on开始监听事件之后，触发$emit publish事件。
$off()删除事件监控
从“@u/eventBus”导入eventBus
eventBus。$off(发送)
订阅功能$on由$eventBus对象完成，与组件无关。如果用v-if销毁子组件，会形成闭包，导致内存泄漏，所以需要在组件销毁时取消监控事件。
点击查看具体原因。
四丶$parent /$children与ref
$parent方法是可以直接访问的子组件的父实例或组件。
定义在父组件中切换显示页面的显示方法。
switchLoadPage(消息){
如果(！this.loading消息)
this.loadtext=msg
this.loading=！this.loading
},
直接通过子组件中的$parent调用此方法。
这个。$ parent . switchloadpage()；
$children方法可以直接访问父组件中子组件的实例，但不保证子组件的顺序。
Ref用于注册DOM元素或子组件的引用信息。参考信息是根据父组件的$refs对象注册的。如果用在普通的DOM元素上，引用信息就是元素；如果在子组件上使用，参考信息是组件实例。
在父组件中自定义一个表组件，并将ref属性添加到子组件中。
结果引用=结果:配置= DG config /结果
在父组件中，可以通过这个找到结果子组件。$refs.result来操作，比如把父组件的sdata直接放到子组件中。
方法：{
信息(){
这个。$ refs . result . sdata=this . sdata；
},
}
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。