vuejs兄弟组件之间的通信

var Event = new Vue();//准备一个空的实例对象
//A组件
var A = {template: `<div><span>我是A组件的数据->pw_a</span><input type="button" value="把A数据传给C" @click = "send"></div>
    `,methods: {send () {Event.$emit("a-msg", this.a);}},data () {return {a: "我是a组件中数据"}}};
//组件Bvar B = {template: `<div><span>我是B组件的数据->pw_a</span><input type="button" value="把B数据传给C" @click = "send"></div>
    `,methods: {send () {Event.$emit("b-msg", this.a);}},data () {return {a: "我是b组件中数据"}}};
//组件Cvar C = {template: `<div><h3>我是C组件</h3><span>接收过来A的数据为: pw_a</span><br><span>接收过来B的数据为: pw_b</span></div>
    `,mounted () {//接收A组件的数据Event.$on("a-msg", function (a) {this.a = a;}.bind(this));//接收B组件的数据Event.$on("b-msg", function (a) {this.b = a;}.bind(this));},data () {return {a: "",b: ""}}};window.onload = function () {new Vue({el: "#box",components: {"dom-a": A,"dom-b": B,"dom-c": C}});};

转载于:https://www.cnblogs.com/qqfontofweb/p/7574847.html

vuejs兄弟组件之间的通信相关推荐

React（5）React兄弟组件之间的通信
文章目录前言一.兄弟组件之间的通信原理二.三个组件的基本结构 1.子组件ColorSelector的基本结构 2.子组件ColorBoard的基本结构 3.父组件Color的基本结构三.Col ...
兄弟组件之间如何通信
在工作中有些情景.兄弟之间的通信,可能用vuex 并不方便,所以需要一个中间介质传递一下. Vue 实例实现了一个事件分发接口. 请直接看代码,在初始化web app的时候,给data添加一个名字为 ...
vue父子组件、兄弟组件之间的通信和访问
注意:1. vue组件间的通信其实有很多种方法,最常用的还是属性传值.事件传值.vuex; 其他方法参考 https://juejin.im/post/5bd18c72e51d455e3f6e4334 ...
vue兄弟组件之间的通信的使用
一般是页面里面引入两个组件在components 里面注册 components:{//引入的组件名 } 两个组件之间要传值的话要共同引入一下js的一个文件 import eventBus from ...
VUE父子组件之间的传值，以及兄弟组件之间的传值；
一.Vue父子组件之间传值 vue使用中,经常会用到组件,好处是: 1.如果有一个功能很多地方都会用到,写成一个组件就不用重复写这个功能了: 2.页面内容会简洁一些:方便管控: 子组件的传值是通过p ...
VUE 2.0 父子组件之间的通信
父组件是通过props属性给子组件通信的来看下代码: 父组件: <parent><child :child-com="content"></child ...
Vue中父子组件之间传值，兄弟组件之间传值（两种方法）
一.父向子传值props 父组件向子组件传值: parent:<parent><child :message="msg"></child> // ...
vue项目笔记（17）-兄弟组件之间的联动
兄弟组件之间的联动在本节中,我们将要实现点击右侧的Alphabet,左侧List组件可以移动到指定的位置,实现兄弟组件之间的通信,我们可以借助它们公共的父组件实现转发.具体步骤如下: 1.步骤一:兄 ...
React兄弟组件之间通信
兄弟组件之间通信 React是只有单项数据流动模式,也就是只能父组件的数据传递给子组件,而没有办法将子组件的数据传递给父组件.那么如果想要两个子兄弟组件通信该怎么办呢? 答案是可以通过子组件向父组件推 ...

vuejs兄弟组件之间的通信

vuejs兄弟组件之间的通信相关推荐

最新文章

热门文章