vue非父子组件间通信

有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的Vue实例作为中央事件总线:

有时候非父子关系的组件也需要通信。在简单的场景下,使用一个空的 Vue 实例作为中央事件总线:


var bus = new Vue()

// 触发组件 A 中的事件

bus.$emit(‘id-selected‘, 1)


// 在组件 B 创建的钩子中监听事件

bus.$on(‘id-selected‘, function (id) {

// ...

})

在更多复杂的情况下,你应该考虑使用专门的 状态管理模式.就是用到了vuex

eventBus是作为兄弟关系的组件之间的通讯中介。

代码示例:

<!DOCTYPE html>
<html>
<head>
<title>eventBus</title>
<script src="http://cdn.jsdelivr.NET/vue/1.0.28/vue.min.js"></script>
</head>
<body>
<div id="todo-app">
<h1>todo app</h1>
<new-todo></new-todo>
<todo-list></todo-list>
</div>
<script>
var eventHub = new Vue( {
data(){
return{
  todos:[‘A‘,‘B‘,‘C‘]
}
},
created:function () {
  this.$on(‘add‘, this.addTodo)
  this.$on(‘delete‘, this.deleteTodo)
},
beforeDestroy:function () {
  this.$off(‘add‘, this.addTodo)
  this.$off(‘delete‘, this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (i) {
    this.todos.splice(i,1)
  }
}
})
var newTodo = {
template:`<div><input type="text" autofocus v-model="newtodo"/><button @click="add">add</button></div>`,
data(){
  return{
    newtodo:‘‘
  }
},
methods:{
  add:function(){
    eventHub.$emit(‘add‘, this.newtodo)
    this.newtodo = ‘‘
  }
}
}
var todoList = {
  template:`<ul><li v-for="(index,item) in items">{{item}} \
            <button @click="rm(index)">X</button></li> \
            </ul>`,
      data(){
            return{
              items:eventHub.todos
            }
      },
       methods:{
            rm:function(i){
              eventHub.$emit(‘delete‘,i)
            }
       }
}
var app= new Vue({
  el:‘#todo-app‘,
  components:{
    newTodo:newTodo,
    todoList:todoList
  }
})
</script>
</body>
</html>

效果图如下:

时间: 2024-10-20 00:51:00

vue非父子组件间通信的相关文章

非父子组件间通信

非父子组件之间的通信,可以通过一个空的 Vue 实例作为中央事件总线(事件中心),用他来触发事件和监听事件. 在这里,如果是工作中的新手看了官网的例子直接上手写,会有些发懵.这个作为事件总线空的 Vue 实例我该写哪里去?因为工作中我们的组件都是互相独立的,不可能写一起的,作用域是不同的,所以需要稍作调整 一.在 main.js 中初始化根 Vue 之前,添加一个 data 对象,内写入一个名为 Event 的空 Vue 对象,也就是中央事件总线 new Vue({ el: '#app', da

vue的父子组件间传值以及非父子间传值

Vue组件间的传值方式: 父传子 子传父 非父子间传值 1.首先父组件传值给子组件,使用bind绑定属性,然后在子组件用props接收属性值. //父组件 <template> <input type="text" /> <br/> <child :inputValue="inputValue"></child> </template> <script> import child f

vue 和 react 组件间通信方法对比

vue 和 react 组件间通信方法对比 通信路径 vue的方法 react的方法 父组件 => 子组件 props(推荐).this.$refs.this.$children props 子组件 => 父组件 自定义事件($emit.$on)(推荐).this.$parent 回调函数(推荐) 非父子组件(兄弟组件.跨级组件) bus 高阶组件(推荐).自定义事件.context 原文地址:https://www.cnblogs.com/cag2050/p/9054840.html

非父子组件间的传值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>非父子组件间的传值(Bus/总线/发布订阅模式/观察者模式)</title> <script src="./vue.js"></script> </head> <body> <div

非父子组件间传值(一)

非父子组件间传值有两种方法,一种是vuex共享数据,另一种是发布订阅模式/观察者模式/总线/Bus.这篇随笔主要总结总线机制的学习心得: 首先通过在Vue.prototype上挂载一个bus属性,指向vue实例:接下来在调用Vue或者创建组件时都会有bus属性. Vue.prototype.bus=new Vue() var Child={ props:['content'], data:function() { return {num:this.content} }, //因为vue是单项数据

Vue父子组件及非父子组件如何通信

1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: 子组件通过props来接收数据: 方式1: 方式2 : 方式3: 这样呢,就实现了父组件向子组件传递数据. 2.子组件与父组件通信 那么,如果子组件想要改变数据呢?这在vue中是不允许的,因为vue只允许单向数据传递,这时候我们可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的. 父组件: 3.非父子组件通信 如果2个组件不是父子组件那么如何通信呢?这时可以通过eventHub来实现

vue2.0父子组件以及非父子组件如何通信

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

vuex非父子组件间改值

最近在用vue写单页面项目嘛,然后就有遇到这问题啦,看了很多参考,要么繁琐的一塌糊涂,要么就是传值并不是改值,下面我述说下方法,最清晰的简单demo 父子间用props 非父子间用vuex store(store/index.js) state: { x:66 }, mutations:{ add:function(state,x){//这边的x来自于a.vue state.x=1+state.x; } }......... a.vue 先引用过来store(import { store } f

angularjs2中的非父子组件的通信

AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值 /** *1.定义一个服务,作为传递参数的媒介 */ @Injectable() export class PrepService{ //定义一个属性,作为组件之间的传递参数,也可以是一个对象或方法 profileInfo: any; } /** *2.传递参数的组件,我这边简单演示,直接就在构