Communication between Vue components

Props delivers data

Using child components in parent components essentially passes in child components through v-bind binding properties, and child components receive attributes from parent components through props

<template>
 <div>
  //Parent component: {{mny}}
  <Son1 :mny="mny"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

2. $emit

The child component triggers the parent component method and passes the modified content to the parent component by callback. The parent component receives the input method of the child component through v-on and receives the parameters from the child component.

<template>
 <div>
  //Parent component: {{mny}}
  <Son1 :mny="mny" @input="change"></Son1>
 </div>
</template>
<script>
import Son1 from "./Son1";
export default {
 methods: {
  change(mny) {
   this.mny = mny;
  }
 },
 components: {
  Son1
 },
 data() {
  return { mny: 100 };
 }
};
</script>

Subcomponents trigger methods that bind themselves

<template>
 <div>
  //Sub-component 1: {{mny}}
  <button @click="$emit('input',200)">change</button>
 </div>
</template>
<script>
export default {
 props: {
  mny: {
   type: Number
  }
 }
};
</script>

Synchronizing the data of parent and child components, -> the grammatical sugar used on child components (. sync and v-model), the difference between V-model and. sync is that the event triggered by V-model can only be input, while. sync can customize the event name.

.sync

<Son1 :mny.sync="mny"></Son1>
<! -- The triggered event name update:(the name of the binding. sync attribute) -->
<button @click="$emit ('update: mny', 200)">Change </button>

v-model

<Son1 v-model="mny"></Son1>
<template>
 <div>
  //Sub-component 1: {{value} // The triggered event can only be input
  <button @click="$emit('input',200)">change</button>
 </div>
</template>
<script>
export default {
 props: {
  value: { // The received property name can only be called value
   type: Number
  }
 }
};
</script>

Three. $parent, $children

Continue to pass properties

<Grandson1 :value="value"></Grandson1>
<template>
 <div>
  //Sun Tzu: {{value}}
  <!-- Calling parent component input Event -->
  <button @click="$parent.$emit('input',200)">change</button>
 </div>
</template>
<script>
export default {
 props: {
  value: {
   type: Number
  }
 }
};
</script>

4. $attrs, $listeners

attrs: batch-down attributes

<Son2 name="Xiaoming" age="10"> </Son2>

<! - You can use the $attrs attribute in the son2 component, and you can continue to pass the attribute downward - >.
<div>
  Son 2: {$attrs. name}
  <Grandson2 v-bind="$attrs"></Grandson2>
</div>


<template>
 Grandson: {{attrs} </div>
</template>

listeners: batch-down method

<Son2 name="Little Everest" age="10"@click="()=>{this.mny=500}> </Son2>
<! - You can use the listeners attribute in the son2 component, and you can continue to pass the method downward - >
<Grandson2 v-bind="$attrs" v-on="$listeners"></Grandson2>

<button@click="$listeners.click()">Change </button>

V. Provide & Inject

Dependency injection principle, provide and inject mainly provide use cases for high-level plug-in/component libraries. Direct use in application code is not recommended.

Provide: Injecting dependency data into the parent

provide() {
  return { parentMsg: "father" };
},

Inject: Parent data can be injected into any child component

inject: ["parentMsg"] // The data is mounted on the current instance

VI. Ref Use

An object that holds all DOM elements and component instances registered with ref features. Attributes and methods of child components can be retrieved from parent components.

<Grandson2 v-bind="$attrs" v-on="$listeners" ref="grand2"></Grandson2>
mounted() { // Get properties defined by components
  console.log(this.$refs.grand2.name);
}

Seven.EventBus

Used for cross-component notification (this can be used for uncomplicated projects)

Vue.prototype.$bus = new Vue();

Add a public issuance to the vue prototype object to expose the vue example for component receiving methods

mounted() {
   this.$bus.$emit("my", "I am Grandson1");
 },

Interbrotherly Component Receiving Method

mounted() {
  this.$bus.$on("my", data => {
   console.log(data);
  });
 },

VIII. Vuex Communication

Globally unified state management is used for communication between components of large-scale projects to manage data state.

In summary, all the communication methods of vue are summarized, not written in particular detail, detailed usage can be seen in the vue document, well, just sauce.~

Tags: Javascript Vue Attribute

Posted on Wed, 11 Sep 2019 02:43:05 -0700 by vince81