What are the communications between vue components?

What are the communications between vue components?

1. Parent-child component communication:
   • Props: The parent component passes data to the child component through props, and the child component receives the data passed by the parent component through props.
   • Events: The child component triggers an event through $emit and passes the data to the parent component, and the parent component receives the data by listening to the event of the child component.
2. Sibling component communication:
   • A common parent component as an intermediary: Two sibling components communicate through a common parent component as an intermediary, and the parent component receives data from one child component and passes it to the other child component through props.
   • Event bus: You can create a Vue instance as an event bus, and sibling components can publish and subscribe to events through the event bus to achieve communication.
3. Cross-level component communication:
   • provide / inject: ancestor components provide data through provide, and descendant components inject data through inject to realize communication between cross-level components.
   • Vuex: Use Vuex as a state management library where you define shared states that all components can access and modify.
4. Use a global event bus or event bus plugin: You can create a global event bus instance, or use a third-party plugin (such as Vue Bus, Event Bus) to communicate between components, and any component can publish and subscribe to events. communication.
5. Use $refsfor\; direct\; access\; to\; parent-child\; components:\; the\; parent\; component\; canname\; the\; child\; component\; throughthe\; refattribute\; ,\; andthe$ parent component can directly access the properties and methods of the child component through refs.
6. Use custom events: Components can use a custom event system through $on,emit$ , $off and other methods to communicate.

1.Props

If the data passed in by props is the same as the data defined in the data of the subcomponent, then there will be a conflict, and the props will be the main one.

If the props pass is a function, then the child component uses props to accept the function, then calls and passes in the data, and the parent component can also receive the data passed from the child component to the parent component. Implement child components to pass data to parent components

2. $emit triggers a custom event

parent component

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

Subassembly

this.$emit('add', good)  

3.ref

• The parent component is set when using the child componentref
• The parent component refgets data by setting the child component

parent component

<Children ref="foo" />  
  
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据 

Next, sibling components pass data

4.EventBus

Create a central event busEventBus

The sibling component $emittriggers a custom event, and $emitthe second parameter is the passed value

Another sibling component $onlistens to custom events

5.provide/inject

// A.vue
export default {
  provide: {
    name: '浪里行舟'
  }
}

// B.vue
export default {
  inject: ['name'],
  mounted () {
    console.log(this.name);  // 浪里行舟
  }
}

inject: ['name'],
mounted () { console.log(this.name); // sailing through the waves } }

**provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的**----vue官方文档 所以，上面 A.vue 的 name 如果改变了，B.vue 的 this.name 是不会改变的，仍然是 浪里行舟。