【VUE】组件间数据交互

父组件向子组件传递值

1. 组件通过props来接收传递过来的值

Vue.component('a-item',{
	props:['n'],
	template:'<div>{{n}}</div>'
	})

2. 父组件通过属性传递值给子组件

<a-item n="父组件的值"></a-item>	//静态的值
<a-item :n="n"></a-item>	//动态的值

**注意：**在props中使用驼峰命名时，在末班中需要用短横线方式，字符串模板中没有限制。
例：

Vue.component('a-item',{
	props:['anTip'],	//驼峰 anTip
	template:`<div>{{anTip}}</div>`	//字符串模板依旧可用驼峰
	})
<a-item an-tip="父组件的值"></a-item>	//短横线 an-tip

子组件向父组件传递值

1. 子组件自定义事件
   在子组件中绑定方法$emit( )实现自定义事件，在 $emit( )中传入参数：自定义事件的名称和传值。

Vue.component('a-item',{
	template:`<div><button @click='$emit("name",123)'>按钮</button></div>`	
	//操作：点击，名称：name 传值:123
	})
<a-item an-tip="父组件的值"></a-item>	//短横线 an-tip

2. 父组件中使用自定义事件和写入自定义事件函数
   父组件通过$event来接收子组件传来的值

<a-item @name='add($event)'></a-item>
<script>
	method:{
		add: function(val){
			console.log(val);
		}
	}
</script>

兄弟组件之间传递值

1. 单独的事件中心管理组件间的通信

var eventHub = new Vue()

2. 监听事件和销毁事件

eventHub.$on('add-todo', addTodo)
//事件名称：add-todo  事件函数:addTodo
eventHub.$off('add-todo')

3. 触发事件

eventHub.$emit('add-todo', id)
//事件名称：add-todo  传递参数:id