“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