Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to achieve two-way binding in Vue without v-model". The content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to achieve two-way binding without v-model in Vue" can help you solve your doubts.

Let's first take a look at the answer:

Use v-model

{{msg}}

Do not use v-model

{{msg1}}

Export default {name: 'test-v-model', data () {return {msg:', msg1:''}}, methods: {handleInput (e) {this.msg1 = e.target.value}

Instead of using v-model, two-way binding needs to be achieved by binding the value of the value property and changing the binding value of the input event.

In other words, v-model is just an abbreviation.

In fact, the essence of v-model is syntactic candy, which is responsible for listening to user input events to update data and doing some special handling for some extreme scenarios. -- official documents

V-model internally uses different property for different input elements and throws different events:

Text and textarea elements use value property and input events

Checkbox and radio use checked property and change events

The select field has value as the prop and change as the event.

The extension of knowledge associated with this topic

Two-way binding

Unidirectional data binding

Unidirectional data flow of interaction between vue components

Q: what is two-way binding?

Two-way binding means that when the data changes, the view is updated synchronously, and when the view changes, the data is also updated.

Q: what is unidirectional data binding?

One-way data binding means that when the data changes, the view is updated synchronously, and when the view changes, the data is not updated.

In vue, bi-directional binding is realized by instructing v-model, and unidirectional data binding is realized by v-bind.

After reading the following code and the gif demo that this code runs, you can see the difference between them.

Two-way binding

{{msg}}

Unidirectional data binding

{{msg1}}

Export default {name: 'test-v-model', data () {return {msg:', msg1:'}

As you can see from the gif diagram, with v-model, when the data changes, the view is updated synchronously, and when the view changes, the data is also updated, which is called two-way binding.

With v-bind, when the data changes, the view is updated synchronously, and when the view changes, the data is not updated, which is called one-way data binding.

Q: what is an vue one-way data flow?

A child component cannot change the prop property passed to it by the parent component, and it is recommended that it throw an event informing the parent component to change the binding value itself.

To sum up, the data goes down and the event goes up.

Vue documents put forward the concept of unidirectional data flow when introducing Prop. Click here to view the description of unidirectional data flow in vue documents.

All prop create an one-way downstream binding between their parent and child prop: updates to the parent prop flow down to the child component, but not vice versa. This prevents accidental changes in the state of the parent component from the child component, making the data flow of your application difficult to understand.

In addition, each time the parent component changes, all prop in the child component will be refreshed to the latest values. This means that you should not change the prop within a subcomponent. If you do, Vue will issue a warning in the browser's console.

Let's look at the following example:

What happens if the subcomponent binds the prop value bidirectionally?

Parent component code:

Import ChildComponent from'. / child.vue'export default {name: 'father-component', components: {ChildComponent}, data () {return {fatherValue:'}

Subcomponent code:

{{value}}

Export default {name: 'child-component', props: {value: {type: String, default:'}

As you can see, the prop value in childComponent can be bound bidirectionally, but the data value in FatherComponent has not changed, and the console throws a warning:

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

Avoid changing the prop value directly, because it will be overridden whenever the parent component is re-rendered. Instead, use data or computed based on the prop value.

Obviously, this behavior of directly changing the prop value of a subcomponent is prohibited by vue.

How to manipulate the prop value passed into a subcomponent

But most of the time, we do have to manipulate the prop values passed into the subcomponents. What should we do?

As the above warning says, there are two ways:

This prop is used to pass an initial value, define a local data property, and use this prop as its initial value

Props: {initialCounter: {type: Number, default: 0},}, data () {return {counter: this.initialCounter}}

The prop is passed in as an original value and needs to be converted, using the value of the prop to define a calculation attribute

Props: {size: {type: String, default:''}}, computed: {normalizedSize: function () {return this.size.trim (). ToLowerCase ()}}

In this way, no matter how the data is manipulated, it is the child component data of the operation, and the parent component data is not affected.

So, we want to use the data passed in by prop to achieve two-way binding, which can be written as follows:

The parent component code remains the same

InnerValue is used in the subcomponent to receive the incoming value:

{{innerValue}}

Export default {name: 'child-component', props: {value: {type: String, default:''}}, data () {return {innerValue: this.value}

We should pay attention to one problem here.

In JavaScript, objects and arrays are passed in by reference, so for an array or object type prop, changing the object or array itself in a child component will affect the state of the parent component.

Again in the above example, we change the value passed in to an object:

Parent component code:

Import ChildComponent from'. / child.vue'export default {name: 'father-component', components: {ChildComponent}, data () {return {fatherObj: {name:' lin'}

Subcomponent code:

{{innerObj.name}}

Export default {name: 'child-component', props: {obj: {type: Object, default: () = > {}, data () {return {innerObj: this.obj}

This.obj here is a reference type and is assigned to innerObj, so innerObj actually points to the data of the parent component, and changes to innerObj.name will still affect the parent component.

Therefore, when dealing with this reference type data, you need to make a deep copy.

Import {clone} from 'xe-utils'export default {name:' child-component', props: {obj: {type: Object, default: () = > {}, data () {return {innerObj: clone (this.obj, true)}

As shown in the figure above, the data between the component and the parent component will not affect each other.

After reading this, the article "how to achieve two-way binding without v-model in Vue" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.