vue兄弟组件传参
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue兄弟组件传参相关的知识,希望对你有一定的参考价值。
参考技术A 应用场景:拥有共同父级页面的两个页面传参原理:vue一个新的实例,类似于一个站,连接着两个组件,也就是一个中央事件总线;
实战:
1.在需要传参的页面引入Bus文件
2.通过Bus.$emit('name','value')传参
(pass:$emit实例方法触发当前实例(这里的当前实例就是bus)上的事件,附加参数都会传给监听器回调。)
1.在需要接收的页面引入Bus文件
2.通过Bus.$on("name", data => );接收
(pass:on:监听当前实例上的自定义事件(此处当前实例为bus)。事件可以由emit触发,回调函数会接收所有传入事件触发函数($emit)的额外参数。)
vue 兄弟组件相互通信
兄弟组件之间相互传递数据
首先创建一个vue的空白实例(兄弟间的桥梁)
两个兄弟之间建立一个js文件
import Vue from ‘vue‘ export default new Vue()
子组件 childa
发送方使用 $emit 自定义事件把数据带过去
<template> <div> <span>A组件->{{msg}}</span> <input type="button" value="把a组件数据传给b" @click ="send"> </div> </template> <script> import vmson from "../../../util/emptyVue" export default { data(){ return { msg:{ a:‘111‘, b:‘222‘ } } }, methods:{ send:function(){ vmson.$emit("aevent",this.msg) } } } </script>
<template> <div> <span>b组件,a传的的数据为->{{msg}}</span> </div> </template> <script> import vmson from "../../../util/emptyVue" export default { data(){ return { msg:"" } }, mounted(){ vmson.$on("aevent",this.getEvnt) }, methods:{ getEvnt(val){ console.log(val); } } } </script>
父组件:
<template> <div> <childa></childa> <br /> <childb></childb> </div> </template> <script> import childa from ‘./childa.vue‘; import childb from ‘./childb.vue‘; export default { components:{ childa, childb }, data(){ return { msg:"" } }, methods:{ } } </script>
以上是关于vue兄弟组件传参的主要内容,如果未能解决你的问题,请参考以下文章