父组件=>子组件
属性props
//child
props:{ msg: String }
//parent
<HelloWorld msg="welcome to vue.js" \>
引用refs
//parent
<HelloWorld refs="test" />
this.$refs.test.xxx
子组件=>父组件
自定义事件
//child
this.$emit('add' , good)
// parent
<Cart @add="cartAdd($event)" />
兄弟组件之间通信
通过共同祖辈搭桥 $parent或 $root
// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')
祖先与后代组件
vue 提供了provide/inject API完成该任务
provide / inject: 能够实现祖先给后代传值
//ancestor
provide(){
return { foo : ' foo ' }
}
//descendant
inject : [ ' foo' ]
注意: provide和inject 主要是为高阶插件、组件库提供用例。并不推荐直接用于应用程序代码中。该方法不能做到后代给祖先传值。
后代 给祖先传值 : dispatch
// 自定义一个dispatch 方法,指定要派发事件名称和数据
function dispatch( eventName , data ){
var parent = this.$parent;
// 只要还存在父元素就继续往上查找
while(parent){
if(parent){
// 父元素用$emit 触发
parent.$emit(eventName , data );
// 递归查找父元素
parent=parent.$parent
}else{
break;
}
}
}
// 使用在后代组件 (某个页面中)
<h1 @click="dispatch('hello','hello world')">{{ msg }}</h1>
// 祖先组件中
this.$on("hello",this.sayHello)
任意两个组件:事件总线或者 VUEX
事件总线 bus
var bus = new Vue()
// A组件中
bus.$emit('data-a', data)
//B组件中
bus.$on('data-a', getData)
vuex: 创建一个全局数据管理者store , 通过它管理数据并通知组件状态变更