vue实现的组件兄弟间通信功能示例

2024-09-29 18:05:22

本文实例讲述了vue实现的组件兄弟间通信功能。分享给大家供大家参考，具体如下：

兄弟组件间通信（event）

借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发

var bus = new Vue();

bus.$emit()
bus.$on()

熊大想要发消息给熊二，

接收方（熊二）：事件绑定

bus.$on('customEvent',function(msg){
//msg就是通过事件 传递来的数据
})

发送方（熊大）：触发事件

bus.$emit('customEvent',123);

练习：

在熊二中加上一个button，
点击按钮时告诉熊大:'快跑！'

接收方：事件绑定
发送方：触发事件

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <xiongda></xiongda>
    <hr>
    <xionger></xionger>
  </div>
  <script>
/*借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发*/
//new一个对象，兄弟间的通信，将借助他事件绑定和触发来实现
  var bus = new Vue();
  //熊大发送消息给熊二
    //xiongda组件
    Vue.component("xiongda",{
      methods:{
        sendToXiongEr:function(){
        //给熊二发送消息
        //触发msgToXiongEr事件
          bus.$emit("msgToXiongEr","哈哈，光头强来了");
        }
      },
      template:`
        <div>
          <h1>我是熊大</h1>
          <button @click="sendToXiongEr">Click Me</button>
        </div>
      `
    })
//熊二组件
    Vue.component("xionger",{
      template:`
        <div>
          <h1>我是熊二</h1>
        </div>
      `,
      mounted:function(){
//      给该组件绑定一个自定义事件和对应的处理函数
        //调用bus中的on方法
        //事件的触发一般是接收数据然后处理
        var that = this;
          bus.$on("msgToXiongEr",function(msg){
            alert("自定义的事件触发，接收到的数据"+msg);
          })
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试，可得到如下运行效果：

改版：熊大在input输入数据传递给熊二

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title></title>
  <script src="https://cdn.bootcss.com/vue/2.0.1/vue.min.js"></script>
 </head>
 <body>
 <div id="container">
    <p>{{msg}}</p>
    <xiongda></xiongda>
    <hr>
    <xionger></xionger>
  </div>
  <script>
/*借助于一个公共的Vue的实例对象，不同的组件可以通过该对象完成事件的绑定和触发*/
//new一个对象，兄弟间的通信，将借助他事件绑定和触发来实现
  var bus = new Vue();
  //熊大发送消息给熊二
    //xiongda组件
    Vue.component("xiongda",{
      data:function(){
        return {
          xiongDaInput:""
        }
      },
      methods:{
        sendToXiongEr:function(){
        //给熊二发送消息
        //触发msgToXiongEr事件
          bus.$emit("msgToXiongEr",this.xiongDaInput);
          this.xiongDaInput = "";
        }
      },
      template:`
        <div>
          <h1>我是熊大</h1>
          <input type="text" v-model="xiongDaInput"/>
          <button @click="sendToXiongEr">Click Me</button>
        </div>
      `
    })
//熊二组件
    Vue.component("xionger",{
      data:function(){
        return{
          recvMsgIs:[]
        }
      },
      template:`
        <div>
          <h1>我是熊二</h1>
          <p v-for="tmp in recvMsgIs">{{tmp}}</p>
        </div>
      `,
      mounted:function(){
//      给该组件绑定一个自定义事件和对应的处理函数
        //调用bus中的on方法
        //事件的触发一般是接收数据然后处理
        var that = this;
          bus.$on("msgToXiongEr",function(msg){
            //alert("自定义的事件触发，接收到的数据"+msg);
              that.recvMsgIs.push(msg);
          })
      }
    })
    new Vue({
      el:"#container",
      data:{
        msg:"Hello VueJs"
      }
    })
  </script>
 </body>
</html>

感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码的运行效果。

希望本文所述对大家vue.js程序设计有所帮助。

Vue组件通信的四种方式汇总

前言众所周知vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了.本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信非父子组件的eventBus通信利用本地缓存实现组件通信 Vuex通信第一种通信方式:父子组件通信父组件向子组件传递数据父组件一共需要做4件事 1.import son from './son.js' 引入子组件 son 2.在componen
Vue 兄弟组件通信的方法（不使用Vuex）

项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示
vue2.0父子组件及非父子组件之间的通信方法

1.父组件传递数据给子组件父组件数据如何传递给子组件呢?可以通过props属性来实现父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr
vue之父子组件间通信实例讲解(props、$ref、$emit)

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>
详解Vue组件之间的数据通信实例

最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信 1 父子组件之间数据通信一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改.而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递.(是不是有点懵逼了,看个例子吧 ) (这里我就直接
详解vue组件通信的三种方式

1. 第一种方式就是官方推荐的官方推荐方式有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu
vue组件之间通信实例总结(点赞功能)

本文实例讲述了vue组件之间通信.分享给大家供大家参考,具体如下: 总结: 父组件-->子组件 ①通过属性步骤1: <son myName="michael" myPhone='123'></son> <son :myName="userList[0]"></son> 步骤2: Vue.component('son',{ props:['myName','myPhone'] }) ②通过$parent 直接在子
Vue.js每天必学之组件与组件间的通信

什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件注册之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone
详解vue跨组件通信的几种方法

在开发组件的时候,一定会遇到组件的通信,比如点击一个图标出现弹窗和蒙层,这三个分别是不同的组件.管理他们之间的状态就成了问题. props双向绑定通过 sync 双向绑定,属性变化会同步到所有组件,这也是最简单的实现方式,缺点是属性会比较多.实现方式如下 App.vue 文件 <template> <div id="app"> <mask :hide-mask.sync="hideMask"></mask> <
Vue.js组件间通信方式总结【推荐】

平时在使用Vue框架的业务开发中,组件不仅仅要把模板的内容进行复用,更重要的是组件之间要进行通信.组件之间通信分为三种:父-子:子-父:跨级组件通信.下面,就组件间如何通信做一些总结. 1.父组件到子组件通过props通信在组件中,使用选项props来声明需要从父级组件接受的数据,props的值可以是两种:一种是字符串数组,一种是对象.props中声明的数据与组件data函数return的主要区别在于props来自父级,而data中的组件是自己的数据,作用域是组件本身,这两种数据都可以在模板t

vue实现的组件兄弟间通信功能示例

相关推荐

随机推荐