vue 值传递的几种方式及监听值变化

1、$emit

2、bus.js

3、vuex

// 父组件
<child @callback="callback" :searchList="searchList"></child>

methods: {
  callback(value) {
    this.selectValue = value
  }
}

// 子组件
methods: {
  onClick(data){
    this.$emit('callback', data);
    console.log(data);
  }
}


// 发给全局
this.$root.$emit('rootback', data)；

// 接收全局的
created() {
  this.$root.$on('rootback', (data) => {
    this.selectValue = data;
  })
}

监听父组件值的变化，props传值

// 子组件

props: {
    newsObject: Object
},
watch: {
	newsObject: {
		deep: true,
		handler(newVal, oldVal){
			console.log( newVal, oldVal)
		}
	}
}

// 执行ref="child"的子组件的 player方法

bindSonPlay(){
  this.$refs['child'].player();
}

 

 

 

 

 

相关阅读：

https://vuex.vuejs.org/

https://www.jianshu.com/p/ca77bded5748