Vue2单一事件管理组件通信

本文为大家分享了vue $emit 和 $on 组件通信，供大家参考，具体内容如下

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8" />
 <title>Vue2-单一事件管理组件通信</title>
 <script src="vue.js"></script>
 <script type="text/javascript"> 

 //准备一个空的实例对象
 var Event = new Vue(); 

 //组件A
 var A = {
  template: `
   <div>
    <span>我是A组件的数据->{{a}}</span>
    <input type="button" value="把A数据传给C" @click = "send">
   </div>
  `,
  methods: {
   send () {
    Event.$emit("a-msg", this.a);
   }
  },
  data () {
   return {
    a: "我是a组件中数据"
   }
  }
 };
 //组件B
 var B = {
  template: `
   <div>
    <span>我是B组件的数据->{{a}}</span>
    <input type="button" value="把B数据传给C" @click = "send">
   </div>
  `,
  methods: {
   send () {
    Event.$emit("b-msg", this.a);
   }
  },
  data () {
   return {
    a: "我是b组件中数据"
   }
  }
 };
 //组件C
 var C = {
  template: `
   <div>
    <h3>我是C组件</h3>
    <span>接收过来A的数据为: {{a}}</span>
    <br>
    <span>接收过来B的数据为: {{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
   }
  });
 }; 

 </script>
</head>
<body>
 <div id="box">
  <dom-a></dom-a>
  <dom-b></dom-b>
  <dom-c></dom-c>
 </div> 

</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vuejs父子组件之间数据交互详解

    父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据 示例 子组件的点击事件函数中$emit自定义事件 export default { name: 'comment', props: ['issue','index'], data () { return { comment: '', } }, components: {}, methods: { removeComment: funct

  • 详解vue组件化开发-vuex状态管理库

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

  • vuejs事件中心管理组件间的通信详解

    本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下 事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventHub = new Vue(); 事件监听和注销监听 事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听 //hook created: function () { //listen event w

  • Vue.js每天必学之方法与事件处理器

    方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `met

  • 详解vue事件对象、冒泡、阻止默认行为

    整理文档,搜刮出一个vue事件对象.冒泡.阻止默认行为的代码,稍微整理精简一下做下分享. 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <s

  • Vue键盘事件用法总结

    这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc

  • vue监听滚动事件实现滚动监听

    在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

  • Vue2单一事件管理组件通信

    本文为大家分享了vue $emit 和 $on 组件通信,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri

  • Vue2.0子同级组件之间数据交互方法

    熟悉了Vue.js的同级组件之间通信,写此文章,以便记录. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点,请在官网上进行查看,不再赘述. 使用NPM及相关命令行工具初始化的Vue工程,目录结构如下 接着我们进入Demo,首先我们可以删除掉模板项目中src/components/Hello.vue,然后在App.vue中删除对于Hello子组件的注册和使用还有一些其他无关紧要的东西,此时的App.vue应为这样 一.我们先来创建中央事件总线,在src/assets/下创建一个eventB

  • Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

    Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)

    在git命令行下,执行以下命令完成环境的搭建: 1,npm install --global vue-cli 安装vue命令行工具 2,vue init webpack vue-demo 使用vue命令生成一个webpack项目,项目名称为vue-demo 3,cd vue-demo 切入项目 4,npm install安装package.json中的所有依赖包 5,npm run dev运行项目 一.父组件向子组件传递数据 然后删除默认的Hello.vue组件,把App.vue整理成以下样子:

  • 一文搞懂Vue2中的组件通信

    目录 vue 组件通信方式 1.props传参 2.emit,on通信 3.$ref,$children实例通信 4.$parent通信 5.插槽通信(一般不用) 6.$attr,$listener深层双向通信 7.provide,inject依赖注入深层次单向通信 8.$bus事件总线全局通信 vue 组件通信方式 1.父组件将自己的状态分享给子组件使用: 方法:父组件通过子标签传递数据,子组件通过 props 接收 2.子组件改变父组件的状态; 方法:父组件在子标签上通过@abc 提供一个改

  • 详解vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js

  • 详解Vue2.0之去掉组件click事件的native修饰

    这个是在组件开发中遇到的问题,当时我在编写button的组件,模板是这样的: <template> <button class="disable-hover button ion-button" :class="[modeClass,typeClass,shapeClass,sizeClass,colorClass,roleClass,strongClass]"> <span class="button-inner"

  • jQuery技巧之让任何组件都支持类似DOM的事件管理

    jQuery技巧之让任何组件都支持类似DOM的事件管理

    本文介绍一个jquery的小技巧,能让任意组件对象都能支持类似DOM的事件管理,也就是说除了派发事件,添加或删除事件监听器,还能支持事件冒泡,阻止事件默认行为等等.在jquery的帮助下,使用这个方法来管理普通对象的事件就跟管理DOM对象的事件一模一样,虽然在最后当你看到这个小技巧的具体内容时,你可能会觉得原来如此或者不过如此,但是我觉得如果能把普通的发布-订阅模式的实现改成DOM类似的事件机制,那开发出来的组件一定会有更大的灵活性和扩展性,而且我也是第一次使用这种方法(见识太浅的原因),觉得它

  • Vue2.0学习之详解Vue 组件及父子组件通信

    Vue2.0学习之详解Vue 组件及父子组件通信

    什么是组件? vue中的组件其实就是页面组成的一部分,好比是电脑中的每一个元件(如硬盘,键盘,鼠标),它就是一个具有独立逻辑或界面,同时又能根据规定的接口规则进行相互融合,变成一个完整的应用. 页面就是由一个个类似这样的部分组成的,比如导航,列表,弹窗,下拉列表等.页面只不过是这些组件的容器,组件自由组合形成功能完整的界面,当不需要某个组件,或者想要替换某个组件时,可以随时进行替换和删除,而不影响整个应用的运行. 前端组件化的核心思路就是将一个巨大复杂的东西拆分成颗粒度合理的小东西. 使用组件的

  • Vue.js组件通信之自定义事件详解

    Vue.js组件通信之自定义事件详解

    组件通信 从父组件向子组件通信,通过props传递数据就可以了,但Vue组件通信的场景不止有这一种,归纳起来,组件之间的通信可以用下图来表示: 自定义事件 当子组件需要向父组件传递数据时,就要用到自定义事件.子组件用**$ emit()来触发事件**,父组件用**$ on()**来监听子组件的事件. 父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的事件. <!DOCTYPE html> <html lang="en"> <head>

随机推荐