Several communication methods of Vue components

Several communication (data transfer) methods of Vue components

Communication between non-parent and child components (Bus event bus)

introduce

Write a js file as an intermediary. The party receiving the message receives it through the listening$on\left(\right)method\; to\; receive\; the\; message\; The\; sender\; sends\; messages\; to\; the\; bus\; through$emit() to achieve the purpose of communication in turn. In the publish-subscribe mode, there can be multiple receivers of the message.

Example

1. Create an event bus that everyone can access (empty Vue instance)

   import Vue from 'vue'
   const Bus = new Vue()
   export default Bus
   

2. A component (receiver), listens to the $on event of Bus

   import Bus from '../utils/EventBus'
   
   created () {
     Bus.$on('sendMsg', (msg) => {
       this.msg = msg
     })
   }
   

3. Component B (sender) triggers the $emit event of Bus

   import Bus from '../utils/EventBus'
   
   Bus.$emit('sendMsg', '这是一个消息')
   

Non-parent-child communication-provide&inject

1.Function

Share data across tiers

2. Scene

3. Grammar

1. Parent component provides provides data

export default {
    
    
  provide () {
    
    
    return {
    
    
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

2. Child/grandchild component inject to obtain data

export default {
    
    
  inject: ['color','userInfo'],
  created () {
    
    
    console.log(this.color, this.userInfo)
  }
}

4.Attention

• The simple type data provided by provide is not responsive, and the complex type data is responsive. (It is recommended to provide complex type data)
• The data obtained by the child/grandchild component through inject cannot be modified within its own component.

Communication between parent and child components

Fixed props attribute name (v-model)

introduce

Using the principle of v-model to communicate between parent and child components, v-model can be split: ①: value ② @input event requires that the attribute name in the props attribute in the child component must be value: Event in $emit() The name must be input

Example

Subassembly

<select :value="value" @change="handleChange">...</select>
props: {
  value: String
},
methods: {
  handleChange (e) {
    this.$emit('input', e.target.value)
  }
}

parent component

<BaseSelect v-model="selectId"></BaseSelect>

Unfixed attribute name (.sync)

introduce

Mainly to make some supplements to the situation in v-model. It is more appropriate to use value when transmitting form data, but some are inappropriate, such as drop-down lists, etc. The advantage is that the value attribute name can be customized without fixing it. Add .sync after the attribute in the parent component, and use @update: attribute name in the event name in $emit() in the child component.

Example

parent component

//.sync写法
<BaseDialog :visible.sync="isShow" />
--------------------------------------
//完整写法
<BaseDialog 
  :visible="isShow" 
  @update:visible="isShow = $event" 
/>

Subassembly

props: {
  visible: Boolean
},

this.$emit('update:visible', false)