父组件 => 子组件:
1.属性props
// child
props: { msg: String }
// parent
<HelloWorld msg="Welcome to Your Vue.js App"/>
2.引用refs
// parent
<HelloWorld ref="hw"/>
this.$refs.hw.xx = 'xxx'(父组件可以读取子组件的值并修改)
3.子组件chidren
// parent
this.$children[0].xx = 'xxx'(父组件可以通过$children或许子组件的值并修改)
子组件 => 父组件:
1.使用$emit
// child
this.$emit('add', good)
// parent
<Cart @add="cartAdd($event)"></Cart>
兄弟组件:通过共同祖辈组件
通过共同的祖辈组件搭桥,$parent或$root。
// Child2
<h2 @click="$parent.$emit('foo',foo)">Child2</h2>
// Child1
this.$parent.$on('foo', (e) =>{
console.log('1111111111111'+e);
})
)
祖先和后代之间
provide/inject:能够实现祖先给后代传值( 多个子代嵌套传值 )
//provide传值
provide() {//多个子代嵌套传值
return { myprovide: this }
},
// inject子组件接收
inject:['myprovide'],
任意两个组件之间:事件总线 或 vuex
事件总线:创建一个Bus类负责事件派发、监听和回调管理(单独创建一个vue实例做监听使用)
Vue.prototype.$bus = new Vue();
<h3 @click="$bus.$emit('foo1')">{{msg}}</h3>(创建响应)
this.$bus.$on('foo1', this.handle)(收到响应)