Vue2.0 sub-component to change the props value and pass the value to the parent component, vue2.0props

Vue2.0 sub-component to change the props value and pass the value to the parent component, vue2.0props

Why are we impulsive to modify data in prop? There are two reasons:

PropAfter being passed in as an initial value, the child component wants to use it as local data;

PropInput as an initial value, which is processed by the Child component into other data output.

For these two reasons, the correct response is:

Define a local variable and initialize it with the value of prop:

props: ['initialCounter'],data: function () { return { counter: this.initialCounter }}

Define a computing attribute, process the value of prop and return it.

props: ['size'],computed: { normalizedSize: function () { return this.size.trim().toLowerCase() }}

Note that objects and arrays in JavaScript are reference types and point to the same memory space. If prop

Is an object or array. Changing it within the child component will affect the status of the parent component.

We know that the parent component uses props to pass data to the child component, but how does the child component communicate with the parent component? At this time, the Custom Event System of Vue comes in handy. Https://cn.vuejs.org/v2/guide/components.html#custom event

Define two variables in the parent component and dynamically bind them to the child component.

Child components:

Parent component:Define two methods and bind them to custom events of child components

The method for changing the props value of the vue2.0 sub-component and passing the value to the parent component is to share all the content with you. I hope to give you a reference, we also hope that you can support the customer's home.