Value transfer between components

Time:2020-11-18

The parent component passes values to the child component

//Father


//Son

Here is the content area – {MSG}}


At the place where the parent component calls the child component, add a custom property test to it, and the value of the property is test

>

Add an option props where the sub component is defined. The value is array, and the array element is the previously defined attribute test

const MyContent = {
props: [‘test’],
template: “#content”
}

You can then use this value in the subcomponents through {{test}} or other Vue usage

>1. The parent component adds a custom property where the child component is called. The value of the property is the value that you need to pass to the child component,
>2. Add a props option where the sub component is defined. Its value is an array composed of user-defined attributes,
>3. In the template of the child component, the value passed to the parent component can be obtained through the self-defined attribute name

Extension: what if the value passed by a parent component to a child component is something that the child does not want? —Subcomponents need to validate the type of data, which is a common step in projects

 props: {
 test: String
 }

Extension: if the value you need to pass is a variable, you need to use the binding property

 

>1. The parent component adds a custom property where the child component is called. The value of the property is the value that you need to pass to the child component. If the value to be passed is a variable, it needs to use the binding property
>2. Add a props option where the sub component is defined. Its value is an array or an object composed of user-defined attributes. If you need to verify the data type, use the object. Otherwise, you can use the array,
>3. In the template of the child component, the value passed to the parent component can be obtained through the self-defined attribute name

The child component passes values to the parent component

Water flows to the ground. If you yearn for high flow, you need to pay a price

>In the subcomponent, execute this. $emit (‘* * custom event * *’,’value to be passed ‘) through an event,

sendData () {
console.log (‘pass value to parent component ‘)
this.$emit(‘my-event-test’, ‘11223344’)
}

>Where the parent component calls the child component, it is bound with the * * custom event * * in the child component. The implementation of the event is implemented by the parent component. Pay attention not to add () to the binding event,

>When implemented in the parent component, parameters are the values passed in

getData (val) {
console.log(val) }

3277e14620c23f0d8b7390054f8ea796.png  

In a child component, execute this. $emit (‘* * custom event * *’,’value to be passed ‘) through an event. When the parent component calls the child component, it is bound with the * * custom event * * in the child component. The implementation of the event is implemented by the parent component. Pay attention not to add () to the binding event. When implementing in the parent component, parameters are the values passed