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

This article will explain in detail the nature and usage of v-model in vue3 components. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

Using two-way binding data in v-model input

V-model is often used in vue to bind to the input value of the input input box. The simple implementation principle should also be known to achieve bi-directional binding through v-bind binding value and dynamic change of binding value combined with @ input input event. The following vue3 implementation code:

{{tryText}} import {ref} from "vue" export default {setup () {let tryText = ref ("default input value") function handelInput (e) {tryText.value = e.target.value / / data access and modification defined by ref need to be done through .value} return {tryText, handelInput}}

I believe you often use v-model in ipnut. Now let's take a look at how to use v-model in components and what it does.

V-model in component

How to use v-model in a component? Let's make it simple.

Parent component

{{message}} import {ref} from'@ vue/reactivity'import HyInput from ".. / components/HyInput.vue" export default {components: {HyInput}, setup () {let message = ref ("hey hey" (* ^) (^ ^ *) ") return {message,}

Sub-component

O (∩ _ ∩) O ~

Export default {props: {modelValue:String,}, emits: ['update:modelValue'], setup (props,context) {function handelClick () {context.emit ("update:modelValue", "O (∩ _ ∩) O ~")} return {handelClick }}}

We may have some doubts when we see this. Why launch the incident? Why is there a default props receive value? Don't worry. we'll understand it from the principle of implementation.

In this way, we can click the button of the child component to change the data of the message in the parent component, which is a simple two-way data binding v-model implementation in the component.

Since it is a two-way binding, you might as well guess whether it is similar to the implementation principle in input? Let's take a look at how it works.

Parent component

{{message}} import {ref} from'@ vue/reactivity'import HyInput from ".. / components/HyInput.vue" export default {components: {HyInput}, setup () {let message = ref ("hey hey" (* ^) (^ ^ *) ") return {message,}

The subcomponents remain the same.

O (∩ _ ∩) O ~

Export default {props: {modelValue:String,}, emits: ['update:modelValue'], setup (props,context) {function handelClick () {context.emit ("update:modelValue", "O (∩ _ ∩) O ~")} return {handelClick }}}

Through the results, we find that it can indeed be achieved.

In this way, we can well understand the emitting event and the default receiving value in the child component. The basic implementation principle is: the parent component transmits the value to the child component, and the child component receives it through props. But when the data needs to be modified in the child component, we send an event to the parent component, and then the parent component receives the passed value to modify it. In fact, it is the communication between parent and child components, but vue helps us to do a simple encapsulation.

Ps: the data bound by default v-model needs to use modelValue to receive and transmit events when reading in the sub-component. By default, it is called update:modelValue. If you want to bind multiple values or adopt a custom name, please see the other words below.

Ps: you can't want to modify the data by modifying the props. First of all, this is a very bad development habit, and then we know that the feature of props is only responsible for passing data, and modifying the props will not achieve the effect we want. We should notify the parent component to update the data, which is the best practice.

Other writing methods

What if the input in our child component is bidirectionally bound to the parent component? And the need to pass multiple bi-directional bound data? What about the custom name?

Parent component

{{message}} {{inputText}} import {ref} from'@ vue/reactivity'import HyInput from ".. / components/HyInput.vue" export default {components: {HyInput}, setup () {let message = ref ("hey hey" (* ^) (^ ^ *) ") let inputText = ref (" hee ") return {message, inputText}

Sub-component

O (∩ _ ∩) O ~

Import {computed} from "vue" export default {props: {modelValue:String, text:String}, emits: ['update:modelValue', "update:text"], setup (props,context) {function handelClick () {context.emit ("update:modelValue") "O (∩ _ ∩) O ~")} let customText = computed ({set (value) {context.emit ("update:text", value)} Get () {return props.text}}) return {handelClick, customText,}

Multiple binding values and renaming of the props in the sub-component of "inputText" is directly text launch event named update:text

Here we can see that in order to bind the parent component bidirectionally in the input box v-model in the child component, we need to use the calculation property computed to achieve, there may be students who want to bind the text in the props directly, right? Again, if you just read it, you can bind it, but when you modify it, you need to notify the parent component of the data update by emitting an event (you can't change the value in props, you can only read it!). So in the calculation property, we emit an event in set to update the parent component data, and when we read it, we just read the value in props directly.

About the nature and usage of v-model in vue3 components is shared here, I hope the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

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.