“This is the 8th day of my participation in the August Gwen Challenge.

There are several types of description between components:

1, the parent component passes data 2 to the child component, the child component passes value 3 to the parent component through an event, and the siblings pass value 3 to each other. Note: The parent component creates => child created => child mouted => parent mouted

支那

One-way data flow occurs in component communication. The parent component sends data to the child component through a prop, but this prop can only be modified by the parent component. If the child component wants to modify the prop, it can only send a custom event through $emit. If the parent component receives the event, the parent component will modify it.Copy the code

1. The parent component passes data to the child component

In VUE, you can use prop to pass data to child components

The parent component part: first, introduce the child component in the parent component, three steps: 1, introduce the child component 2, register component 3, call in the parent component

支那

<child-frist :users="userName"></child-fristCopy the code

支那

Data () {return {name:'parent',mode: 'parent'}}; },Copy the code

Child component: The child component uses props to receive values from the parent component

支那

Export default {name: "child", props: ["users"],// '行 为 : userName' data() {return {}; }}};Copy the code

2. Child components pass values to parent components via events

The child components

支那

<input type="text" v-model="value" @change="setValue(value)">
Copy the code

支那

$emit('changeFu',value)}Copy the code

The parent component

支那

<! </p><span>{{MSG}}</span> ** ' '** <child-second @changefu ="changeParent"></child-second>Copy the code

支那

changeParent(value) {
   this.msg = value;
}
Copy the code

3. Sibling components pass values to each other

3.1 The first type:

1. Before generating vUE instance, add a bus attribute to the prototype of vUE, which is the instance of VUE; Subsequent vUE instances are created with the bus attribute

支那

// main.js
Vue.prototype.bus = new Vue();
Copy the code

Set in one of the sibling components:

支那

<input type="text" v-model="value" @change="setValue(value)"> // js setValue(value){ console.log(value) $emit('sharetext', value)// Emit event sharetext}Copy the code

Set in another sibling component

支那

mounted() { //let _this = this; Bus.$on("sharetext", value => {// use $on to listen for events sharetext this.value = value; }); },Copy the code

Note: Value is initialized regardless of the sibling component

3.2 The second is very similar to the first

1. Create a new js file, which I’ll call bus.js;

支那

Import Vue from 'Vue '; export default new Vue();Copy the code

Then introduce the import bus from ‘file path’ to each of the sibling components that you need to pass values to.

支那

<input type="text" v-model="value" @change="setValue(value)"> setValue(value){ bus.$emit('sharetext', Value)// Trigger event sharetext}Copy the code

Finally execute the following in another component of the communication you need:

支那

Mounted () {bus.$on("sharetext", value => {// check whether sharetext this. }); }Copy the code

4. When passing values are various attributes

支那

ArrayA: [String, Number], **3, mandatory String arrayB: {type: String, required: {type: String, required: ArrayC: {type: Numeber, default: 100}, **5, arrayC: {type: array, default: 100}, **5, arrayC: {type: array, default: () => {return []} // or the following method default: function(){return []}}, **6 Default: function(){return {message: 'hello'}}}, **7 { type: [Object, Array] } }Copy the code