Valor de transferencia de componentes de Vue, disposición de comunicación

1. Componente principal => Componente secundario

    Accesorios de propiedad

 // child 子组件 接收
props: { msg: String }


// parent  父组件 传值
<HelloWorld msg="Welcome to Your Vue.js App"/>

  Referencias de referencia

//parent   父组件 
<HelloWorld  ref="hw"> 

this.$refs.hw.xx = "xxxx"

 //  xx 为子组件的值
注意 使用时 需要子组件挂载完毕

 Niños subcomponente

 

// parent 在父组件使用
this.$children[0].xx = 'xxx'

注意 官方说明$children并不保证顺序，也不是响应式的

 

2. Componente hijo => componente padre

   Evento personalizado

// child 
this.$emit('add', good)

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

   

3.Componentes hermanos: a través de componentes ancestrales comunes

    Puente a través de componentes de ancestros comunes, $ parent o $ root.

// brother1  传递数据组件
this.$parent.$on('foo', handle) 

// brother2   接收数据组件
this.$parent.$emit('foo')

4. Entre antepasados ​​y descendientes

   proporcionar / inyectar: ​​permitir que los antepasados ​​pasen valores a los descendientes   

 // ancestor
provide() {
    return {foo: 'foo'}
}
// descendant
inject: ['foo']

5. Entre dos componentes cualesquiera: bus de eventos o vuex

   Bus de eventos: cree una clase de bus responsable del envío de eventos, la supervisión y la gestión de devolución de llamadas

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

  constructor(){
      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) 
// child2 
this.$bus.$emit('foo')
 

   vuex: cree una tienda de administración de datos global única, administre los datos a través de ella y notifique los cambios de estado de los componentes

6. Ranura

      Ranura anónima

// comp1
<div>
    <slot></slot>
</div>

// parent
<comp>hello</comp>

    Tragamonedas con nombre 

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

// parent
<Comp2>
     <!-- 默认插槽用default做参数 -->
     <template v-slot:default>具名插槽</template> 
     <!-- 具名插槽用插槽名做参数 -->
     <template v-slot:content>内容...</template>
</Comp2>

  Ranura de alcance

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

// parent
<Comp3>
    <!-- 把v-slot的值指定为作用域上下文对象 -->
    <template v-slot:default="ctx">来自子组件数据:{
   
   {ctx.foo}} </template>
</Comp3>