父组件 => 子组件：

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)(收到响应)