Vue component communication summary

The following communication methods, some in the development of almost no use, do not have to recite, so do not have too much entanglements, do not have too much heart burden, have an impression on the line, the reason is purely for the interview process may be asked: vUE components between the communication methods? Answer the time say the name to go 😚

👳👶 Parent-child component communication

Most of the communication provided by vUE itself is parent-child component communication

• prop

One of the most common forms of component communication is passing from parent to child.

• event

One of the most common ways for components to communicate is to notify the parent component through an event when something happens to a child component.

• Style and class

Style and class communicate narrowly, passing styles. A parent component can pass style and class to its children, eventually merging them into the root element of the child component.

Example:

The parent component

<template>
  <div id="app">
    <HelloWorld// The parent uses the child component, and the styles written here are passed to the root element of the child componentstyle="color:red"
      class="hello"
      msg="Welcome to follow me!"
    />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>
Copy the code

Child components

<template>
// If the child component already has class and style attributes, they will be merged with the style passed by the parent component
  <div class="world" style="text-align:center">
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".props: {
    msg: String,}};</script>
Copy the code

Final render result:

<div id="app">
  <div class="hello world" style="color:red; text-aling:center">
    <h1>Welcome to follow me!</h1>
  </div>
</div>
Copy the code

• attributet

Attributet is rarely used in development. If a parent component passes attributes to a child component that are not declared (attributes not including style and class are treated specially), they are called attributes, and these attributes are attached directly to the root element of the child component. And we can get it in the child component with this.$attrs

The sample

The parent component

<template>
  <div id="app">
    <! Attribute -->
    <HelloWorld
      data-a="1"
      data-b="2"
      msg="Welcome to Your Vue.js App"
    />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
};
</script>
Copy the code

Child components

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  name: "HelloWorld".inheritAttrs: false.// It is forbidden to attach attributes to the root element of a child component, but not to obtain them through '$attrs'
  props: {
    msg: String,},created() {
    console.log(this.$attrs); {"data-a": "1", "data-b": "2"}}};</script>
Copy the code

Final render result:

<div id="app">
  <div data-a="1" data-b="2">
    <h1>Welcome to Your Vue.js App</h1>
  </div>
</div>
Copy the code

[inheritAttrs: false] [data-a=”1″ data-b=”2″] [inheritAttrs: false] [inheritAttrs: false] [$attrs] [data-a=”1″ data-b=”2″] [$attrs]

• Natvie modifier

When registering an event, the parent component can use the native modifier to register the event on the root element of the child component.

The sample

The parent component

<template>
  <div id="app">
    <HelloWorld @click.native="handleClick" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  components: {
    HelloWorld,
  },
  methods: {
    handleClick() {
      console.log(1); ,}}};</script>
Copy the code

Child components

<template>
  <div>
    <h1>Hello World</h1>
  </div>
</template>
Copy the code

The renderings

<div id="app">
  <! -- Click on the div to print 1 -->
  <div>
    <h1>Hello World</h1>
  </div>
</div>
Copy the code

• $listeners

Child components can retrieve all event handlers passed by the parent via $Listeners.

• v-model

• Sync modifier

The sync modifier is not limited. There is no sync modifier in VUe3. It is merged with the V-Model to form one.

The sample

The following code does something like this: the parent component passes two values num1 and num2 to the child component. The child component has no ability to modify, but the child component has the ability to fire an event, which triggers updata1 and updatA2, and passes two new values num1 ± 1 and num2 ± 1 for the parent component to process

Child components

<template>
  <div>
    <p>
      <button @click="$emit(`update1:num1`, num1 - 1)">-</button>
      {{ num1 }}
      <button @click="$emit(`update1:num1`, num1 + 1)">+</button>
    </p>
    <p>
      <button @click="$emit(`update2:num2`, num2 - 1)">-</button>
      {{ num2 }}
      <button @click="$emit(`update2:num2`, num2 + 1)">+</button>
    </p>
  </div>
</template>

<script>
export default {
  props: ["num1"."num2"]};</script>
Copy the code

The parent component

<template>
  <div id="app">
    <Numbers :num1.sync="n1" :num2.sync="n2" />
    <! 'Numbers' equals' Numbers'
    <Numbers
      :num1="n1"
      @update:num1="n1 = $event"
      :num2="n2"
      @update:num2="n2 = $event"
    />
  </div>
</template>

<script>
import Numbers from "./components/Numbers.vue";

export default {
  components: {
    Numbers,
  },
  data() {
    return {
      n1: 0.n2: 0}; }};</script>
Copy the code

Effect display:

• $parentand$children

Inside the component, you can get the parent and child instances of the current component using the $parent and $children attributes, respectively

Example:

<template>
  <div id="app">
    <h1>forensic</h1>
    <A />
    <A />
  </div>
</template>

<script>
import A from ".. /src/component/A"

export default {
  components: { A },
  mounted(){
    console.log(this.$children); }};</script>
Copy the code

• ref

The parent component can use ref to get an instance of the child component, or it can be used on the DOM to get the current DOM element

🧜♂️🧛♀️ Cross-component communication

Except Provide and Inject are the communication modes provided by VUE, the other modes rely on indirect communication by the third party

• ProvideandInject

This is the way vUE provides cross-component communication, but not sibling components, only parent-child components or ancestor and descendant relationships can communicate.

The sample

// Parent component provides 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// Inject 'foo' into the subcomponent
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}
Copy the code

See: cn.vuejs.org/v2/api/?#pr…

• router

If a component changes the address bar, all components listening for the address bar react accordingly

The most common scenario is to change the address by clicking on the router-link component, and the router-View component renders other content

• vuex

Data warehouse for large projects

• storemodel

Data warehouse for small to medium sized projects

// store.js
const store = {
  loginUser:... .setting:... }// compA
const compA = {
  data(){
    return {
      loginUser: store.loginUser
    }
  }
}

// compB
const compB = {
  data(){
    return {
      setting: store.setting,
      loginUser: store.loginUser
    }
  }
}
Copy the code

• eventbus

A component notifies the event bus that something happened, and the event bus notifies all other components listening for the event to run a function

😊 well, that’s all I have to share. If you have any other understanding of vUE component communication, you can discuss it in the comments section

I hope you can like 👍 to support oh ~ 😘, I will be more motivated 🤞