vue组件之间的通信

vue组件之间的通信

1.父子组件的通信

a.父组件向子组件传递通信

1. 采用vue中的 props

   单向数据流
   所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
   额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。

   在子组件中 使用dom属性进行通信。

   你已经知道了可以像这样给 prop 传入一个静态的值：
   <blog-post title="My journey with Vue"></blog-post>
   <!-- 动态赋予一个变量的值 -->
   <blog-post v-bind:title="post.title"></blog-post>
   <!-- 动态赋予一个复杂表达式的值 -->
   <blog-post  v-bind:title="post.title + ' by ' + post.author.name"
   ></blog-post>	
   

2. $broadcast

   $dispatch 和 $broadcast 已经被弃用。
   $dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。
   简单的用法

   子组件通过**$on**注册监听

   // 组件通过$on来注册监听 getcalendar
   // ...
   	created(){
   		this.$on('getcalendar',this.calendar)
   	},
   	methods:{
   		calendar(){....}
   	},
   	destroyed(){
   		this.$off('getcalendar',this.calendar)
   	}
   

   父组件通过**$broadcast**触发所有子组件对应的监听;

   	// 父组件广播getcalendar事件，来传递数据
   	methods:{
   		sendcalendar(){
   			//触发所有的组件的getcalendar监听。
   			this.$broadcst('getcalendar',moment().calendar())
   		}
   	}
   

2.子组件向父组件传递数据

TODO://类似$broadcast  子组件开启$emit向父组件发射触发事件。 父组件通过$on注册事件

3.推荐的通信方式

1. 用集中式的事件中间件

   因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast也没有解决兄弟组件间的通信问题。对于$dispatch 和 $broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。
   这些方法的最常见用途之一是父子组件的相互通信。在这些情况下，你可以使用 v-on监听子组件上 $emit的变化。这可以允许你很方便的添加事件显性。然而，如果是跨多层父子组件通信的话，$emit 并没有什么用。相反，用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利，即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例，实际上你可以使用一个空的 Vue 实例。

   1. 创建事件中心管理组件间的通信：

      	/ 将在各处使用该事件中心
      	// 组件通过它来通信
      	var eventHub = new Vue()
      

   2. 使用 $emit, $on, $off 分别来分发、监听、取消监听事件：

      	// TODO删除组件  创建一个删除TODO记录的方法
      	// ...
      		methods:{
      			deleteFnc(id){
      				eventHub.$emit('todo.delete',id)
      			}
      		}
      

      	// TODO新增组件  创建一个新增TODO记录的方法
      	// ...
      		methods:{
      			addFnc(item){
      				eventHub.$emit('todo.add',item)
      			}
      		}
      

      	// TODO页面  通过事件中心 监听todo.delete和todo.add的事件，
      	// 在创建组件的时候注册add和delete监听，在销毁时注销监听
      	// ...
      		created(){
      			 eventHub.$on('add-todo', this.addTodo)
      			 eventHub.$on('delete-todo', this.deleteTodo)
      		},
      		methods:{
      			addTodo(item){
      				this.list.push(item)
      			},
      			deleteTodo(id){
      				this.list.remove(item=>item.id === id)
      			},
      		},
      		// 清除事件监听
      		destroyed(){
      		 	 eventHub.$off('add-todo', this.addTodo)
      			 eventHub.$off('delete-todo', this.deleteTodo)
      		}
      

   2.vueX管理