组件传值、通信

父组件=>子组件

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.子组件children

//parent

this.$children[0].xx = 'xxx'

4.子组件 => 父组件:自定义事件

// child

this.$emit('add', good)

// parent

<Cart @add="cartAdd($event)"></Cart>

5.兄弟组件:通过共同祖辈组件

通过共同的祖辈组件搭桥，root

// brother1

this.$parent.$on('foo', handle)// brother2this.$parent.$emit('foo')

6.祖先和后代之间

provide/inject:能够实现祖先给后代传值

// ancestor

provide() {    return {foo: 'foo'}

}

// descendant

inject: ['foo']

7.任意两个组件之间:事件总线 或 vuex事件

事件总线：创建一个Bus类负责事件派发、监听和回调管理

// Bus:事件派发、监听和回调管理class Bus{

  constructor(){    // {

    //    eventName1:[fn1,fn2],

    //    eventName2:[fn3,fn4],

    // }    this.callbacks = {}

  }  $on(name, fn){

    this.callbacks[name] = this.callbacks[name] || []

    this.callbacks[name].push(fn)

  }

  $emit(name, args){    if(this.callbacks[name]){

      this.callbacks[name].forEach(cb => cb(args))

    }

} }

// main.js

Vue.prototype.$bus = new Bus()

// child1

this.$bus.$on('foo', handle)// child2this.$bus.$emit('foo')

vuex:创建唯一的全局数据管理者store，通过它管理数据并通知组件状态变更

插槽

Vue 2.6.0之后采用全新v-slot语法取代之前的slot、slot-scope

1.匿名插槽

// comp1

<div>

    <slot></slot>

</div>

// parent<comp>hello</comp>

2.具名插槽

// comp2

<div>

    <slot></slot>

    <slot name="content"></slot>

</div>

// parent

<Comp2>

</Comp2>

3.作用域插槽

// comp3

<div>

    <slot :foo="foo"></slot>

</div>

// parent

<Comp3>

来自子组件数据:{{ctx.foo}}</template>

</Comp3>