标签:mount log imp data col 事件 child from 实例
兄弟组件之间相互传递数据
首先创建一个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>
标签:mount log imp data col 事件 child from 实例
原文地址:https://www.cnblogs.com/xiaozhumaopao/p/12521136.html