[JavaScript知识库]vue指令和组件之间数据共享

1. vue指令按照不用用途可分为如下6大类：
   😃 内容渲染指令：v-text、{{}} 、v-html
   😃 属性绑定指令：v-bind（简写是:）
   😃 事件绑定指令：v-on（简写是@）记住：事件修饰符
   😃 双向绑定指令：v-model
   😃 条件绑定指令：v-if 、v-show
   😃 列表渲染指令：v-for
2. 组件之间的数据共享
   2.1. 父向子传值 (props)

发送方

//父组件 
<son :msg="message" />

data()
{
	return {
	message:"hello"}
}

接收方

//子组件
<p> 父组件传过来的msg值是{{ msg }} </p>

props:['msg']

2.2. 子向父传值（emit）

发送方

//子组件
methods:{
	add(){
	this.count += 1；
	//修改数据时，通过$emit()触发自定义事件
	this.$emit('numchange',this.count)
	}
}

接收方

//父组件
<son @numchange="getNewCount" />

method:{
	getNewCount(val){
		this.countFromSon = val
	}
}

2.3. 任意组件之间传值(emit、on)

• 创建eventBus,js模块，并向外共享一个Vue实例对象
• 数据发送方,调用bus.$emit(’事件名称‘，要发送的数据)方法触发自定义事件
• 数据接收方,调用bus.$on(’事件名称‘，事件处理函数)方法注册一个自定义事件

也可设置全局EventBus：