vue指令和组件之间数据共享

一、 vue指令按照不用用途可分为如下6大类：

😃 内容渲染指令：v-text、{{}} 、v-html
😃 属性绑定指令：v-bind（简写是:）
😃 事件绑定指令：v-on（简写是@）记住：事件修饰符
😃 双向绑定指令：v-model
😃 条件绑定指令：v-if 、v-show
😃 列表渲染指令：v-for

二、 组件之间的数据共享

1. 组件传值：父向子传值、子向父传值、兄弟之间传值。
2. 路由传值：$route传值

2.1 组件传值

• 父向子传值 (props)

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

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

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

props:['msg']

• 子向父传值（emit）

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

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

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

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

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

（4）也可设置全局EventBus：

2.2 路由传值

this.$router.push({
    path: '/StandbyMessage',
    query: {
         ...DATA,
         activeName: activeName,
     },

 this.cylinder = {
         ...this.$route.query,
     };
 this.activeName = this.$route.query.activeName;