vue component communication mode

Parent child component communication

Most of the communication methods provided by vue are parent-child component communication

  • prop is one of the most common means of component communication, which is passed from parent component to child component.

  • Event is one of the most common component communication methods. When something happens to a child component, the parent component can be notified through event.

  • Style and classstyle and class have a narrow communication range. They are transitive styles. The parent component can pass style and class to the child component, and eventually they will be merged into the root element of the child component.


Parent component

<template>  <div id="app">    <HelloWorld    //The parent component uses the child component. The style written here will be passed to the root element of the child component. Style = "color: Red" class = "hello" MSG = "welcome to follow me!" / > < / div > < / template >
<script>import HelloWorld from "./components/HelloWorld.vue";
export default {  components: {    HelloWorld,  },};</script>


<template>//If the class and style attributes already exist on the child component, they will be merged with the styles passed from the parent component < div class = "world" style = "text align: Center" > < H1 > {msg}} < / H1 > < / div > < / template >
<script>export default {  name: "HelloWorld",  props: {    msg: String,  },};</script>

Final render result:

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

Attributeattributet is rarely used in development. If the parent component passes some attributes (attributes do not include style and class, which will be specially treated) to the child component, but the child component does not declare these attributes, they are called attributes. These attributes will be directly attached to the root element of the child component, and we Front end training I learned that you can get it through this.$attrs in the sub component


Parent component

<template>  <div id="app">    <!-- except msg Everything else is 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


<template>  <div>    <h1>{{msg}}</h1>  </div></template>
<script>export default {  name: "HelloWorld",  inheritAttrs: false,//It is forbidden to attach an attribute to the root element of the sub component, but it does not affect the acquisition of props through ` $attrs': {MSG: string,}, created() {console.log (this. $attrs); / / get: {Data-A ":" 1 "," data-b ":" 2 "}},}</ script>

Final render result:

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

The subcomponent can be configured through inheritattribrs: false. It is forbidden to attach attribute s to the root element of the subcomponent, that is, Data-A = "1" data-b = "2" will not appear on the root element of the subcomponent, but it will not affect the acquisition through $attribrs.

natvie modifier

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


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>


<template>  <div>    <h1>Hello World</h1>  </div></template>

Render results

<div id="app">  <!-- Click this div´╝îWill output 1 -->  <div>    <h1>Hello World</h1>  </div></div>
  • $listeners

The child component can obtain all event handling functions passed by the parent component through $listeners.

  • v-model

  • sync modifier

Similar to v-model, it is a syntax sugar used for two-way binding. The difference is that v-model can only bind two-way for one data, and the sync modifier is not limited. There is no sync modifier in vue3, which will be combined with v-model.


The following code does this: the parent component passes two values num1 and num2 to the child component. The child component does not have the ability to modify, but the child component has the ability to trigger events, so updata1 and updata2 are triggered, and two new values num1 ± 1 and num2 ± 1 are passed to the parent component for processing


<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>
Parent component
<template>  <div id="app">    <Numbers :num1.sync="n1" :num2.sync="n2" />    <!-- above Numbers Equivalent to the following 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>

Effect display:

$parent and $children

Within the component, you can get the parent component and child component instances of the current component through the $parent and $children attributes


<template>  <div id="app">    <h1>Forensic medicine</h1>    <A />    <A />  </div></template>
<script>import A from "../src/component/A"
export default {  components: { A },  mounted(){    console.log(this.$children);  }

Ref parent components can obtain instances of child components through ref, and can also be used in dom to get the current dom elements

Cross component communication

Except that Provide and Inject are the communication methods provided by vue, all other methods rely on the indirect communication of a third party

Provide and Inject

This is the cross component communication mode provided by vue, but brother components can't. only parent-child components or the relationship between ancestors and descendants can communicate.


// Parent component provides' foo 'var provider = {provide: {foo:' bar '}, / /...}
// Subcomponent injection 'foo' var child = {inject: ['foo '], created() {console.log (this. Foo) / / = > "bar"} / /...}


If a component changes the address bar, all components listening to the address bar will respond accordingly

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


Data warehouse for large projects

store mode

Data warehouse for small and medium-sized projects

// store.jsconst store = {  loginUser: ...,  setting: ...}
// compAconst compA = {  data(){    return {      loginUser: store.loginUser    }  }}
// compBconst compB = {  data(){    return {      setting: store.setting,      loginUser: store.loginUser    }  }}

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

Tags: Front-end Vue.js

Posted on Fri, 26 Nov 2021 05:04:25 -0500 by StormTheGates