The Vue basic Knowledge set written before has included the knowledge point of passing value, but due to the content is too much, so I take out this important question in the interview separately, for detailed explanation, if you want to see the Vue basic knowledge set can visit juejin.cn/post/684490… This blog post

The father the son

Condition:

The parent component has known data and the child component has unknown data. If the child component wants to use the value of the parent component, it can pass the value of the parent component to the child component through property bindingCopy the code
  1. When using a child component as a tag in the parent component, you can use property binding to pass data to the child component:
<my-son :pmsg1="parentMsg" :pinfo="parentInfo"></my-son>

....

data() {return {
       parentMsg:'I'm the parent component' ,
       parentInfo:'I am parent component information'}}Copy the code

2. In the parent component, if we want to pass data to the parent component, we must define the props array to receive: props

<script>
  export default {
    data() {return{}}, methods: {}, // property attribute // If the parent component passes data to the child component, it must be received by props. // Props can be used directly on the page; Props: ['pmsg1'.'pinfo']
  }
</script>
Copy the code

Note:

// Props: {// props: height: Number, // props + other props: {type: Number, default: 0, required: true, validator: Function (value) {return value > = 0}}} it can also have some other parameters, such as data type, or a validation method can, such as a member of the parent to child components data props are readable data, not for them to assignment, The data in the data is the private data of the current property, and the data in the data is readable and writable. Because the data in the data is read-only, the data in the data can be copied to the data to implement the re-assignment. import _ from 'lodash'; Export default {data () {/ / change the properties for ripping only simple data types can turn, for complex data types also need to operate other return {infoFromParent: enclosing pinfo, msgFromParent:_.cloneDeep(this.pmsg) } }, // The subcomponent needs to use the props button to support :[' PMSG ','pinfo'] Since the above values are passed and stored as values of simple data types, if they are changed to values of reference data types, the values will be modified simultaneously. Therefore, deep copy operation is required here. In this case, a package lodash is used for deep copy operationCopy the code

}

3. After receiving the props data, you can directly use the template section of the sub-component:

< the template > < div > < h3 > this is child components - {{pmsg1}} - {{pinfo}} < / h3 > < / div > < / template >Copy the code

The specific operation is shown in the following figure:

Child the parent

Condition: The child component data is known, but the parent component data is unknown. If the parent component wants to use the methods of the child component, the child must be passed to the parent

  1. If the parent passes the method to the child, the event binding mechanism needs to be used:
 <my-son @func="show"></my-son> ... Methods :{// The methods method needs to be defined in the parent component: Console. log(val)}} Show (val){console.log(val)}} Show (val){console.log(val) {console.log(val)}Copy the code

Subcomponent calls methods:

Methods: {// Click a button in a child component to trigger a button click eventbtnHandle(){// Pass this in the child component.$emit() method that fires the parent component and binds the func event this to the child component.$emit('func'+this.msg) //this.msg is the real argument, the value is this.msg}},Copy the code

The specific steps of the son to the father:

1. The event binding mechanism @ is used when children transmit values to their parents.

2. The parent passes a reference to a method to the child

3. In the child component, you can use this.$emit() to call the method passed by the parent component

4. When calling methods in the parent component using this.$emit(), you can pass arguments from the second position; Pass data from the child to the parent’s method scope, via arguments;

5. The parent component can use the parameter to receive the data from the child component.

Passing values between brothers

The technology used to transfer values between sibling components is EventBus.

1. Define the module bus.js

import Vue from 'vue'
       
export default new Vue()
Copy the code

2. In the sibling component that needs to receive data, import the bus.js module

import bus from './bus.js'
Copy the code
  1. In the Created lifecycle function in the sibling component that needs to receive data, use bus.$on(‘ event name ‘, (received data) => {}) to customize the event:
 created(){// Define the event bus.$on('ooo', (data)=>{
           console.log(data)
         })
       }
Copy the code

4. In the sibling component that needs to send data, import the bus.js module

import bus from './bus.js'
Copy the code

$emit(‘ event name ‘, data to send) on the sibling component that needs to send data:

import bus from './bus.js'
       export default {
           data() {return {
               msg: 'abcd'
             }
           },
           methods: {
             sendMsg(){// Trigger the binding event and pass out the bus argument.$emit('ooo', this.msg)
             }
           }
 }
Copy the code

Note:

$emit() = $emit(); $emit() = $emit(); $emit() = $emit()Copy the code

In the process of project development, if the data is simple, we will use this simple value transfer; if it is complex, we need to use Vuex state management to transfer values between data. Bloggers using Vuex state management can refer to:

Juejin. Cn/post / 684490…