How to simulate v-model with vue component

Vue is a popular JavaScript framework that helps developers build interactive web applications. v-model is a special syntactic sugar in Vue that allows developers to easily implement two-way binding of form elements. However, in some cases, we may need to use v-model in custom components. This article will explore how to use Vue components to simulate v-model.

1. Introduction to v-model

v-model is one of the most widely used instructions in Vue. It can help developers implement two-way data binding of form elements. Normally, we use the v-model directive to achieve the following functions:

1. Bind data in the form element:

<input v-model="msg">

In this way, when entering the form, the input box The value in will be reflected in the msg attribute of the Vue instance in real time.

2. Use in computed properties:

<div>{{ fullName }}</div>
<input v-model="firstName">
<input v-model="lastName">
<script>
    data() {
        return {
            firstName: '',
            lastName: ''
        }
    },
    computed: {
        fullName() {
            return this.firstName + ' ' + this.lastName
        }
    }
</script>

In this example, we use the v-model directive to compare the values ​​of the two input boxes with the firstName and lastName of the Vue instance Properties are bound together, and both properties are used by the computed property fullName. When we modify the value of the input box, the calculated property fullName will be updated in real time and the page will be re-rendered.

2. v-model in custom components

In the component development of Vue, there are some scenarios where the v-model directive needs to be used in custom components. For example, we may need to implement an editable data list, similar to the following:

<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      <input v-model="item.name"><button @click="removeItem(index)">删除</button>
    </li>
    <li>
      <button @click="addItem">添加</button>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        {name: 'item1'},
        {name: 'item2'},
        {name: 'item3'},
      ]
    }
  },
  methods: {
    addItem() {
      this.items.push({name: ''})
    },
    removeItem(index) {
      this.items.splice(index, 1)
    }
  }
}
</script>

This component uses the v-for directive to render a data list. Each list item contains an input box and a delete button. . We can modify the name of each item in the list by adding and removing operations. Although the implementation of this component is simple, it does not use the v-model directive to implement two-way data binding. We can create a v-model directive to implement two-way data binding functionality in custom components.

3. Use Vue components to simulate v-model

Vue allows developers to use the v-model directive in custom components, which can easily implement the two-way data binding function of custom components . Vue compiles the v-model directive into a property named model and an event named update:modelValue. We can use these two properties and events in custom components to simulate the effect of the v-model directive. The following is a simple demo component:

<template>
  <div>
    <input :value="value" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: String,
        default: ''
      }
    },
    methods: {
      updateValue(value) {
        this.$emit('update:value', value)
      }
    }
  }
</script>

In this component, we use the value attribute to receive the value from the parent component. We update the value of the inner component by calling the updateValue method and use the $emit method to trigger the update:value event and pass the new value to the parent component. This completes the two-way data binding function.

Now we can use the v-model directive in the parent component to perform data binding with the child component:

<template>
  <div>
    <CustomInput v-model="msg"></CustomInput>
  </div>
</template>

<script>
    import CustomInput from './CustomInput.vue'
    
    export default {
        data() {
            return {
                msg: ''
            }
        },
        components: {
            CustomInput
        }
    }
</script>

In the parent component, we use the v-model directive to bind the msg attribute to the child component The value attribute in the component is bound. In this way, when we modify the content in the input box in the child component, the msg attribute will also be updated accordingly. At the same time, if the value of the msg attribute is modified in the parent component, the input box in the child component will also be updated synchronously. This completes the effect of the v-model directive.

4. Summary

In Vue, the v-model directive is a convenient and practical two-way binding syntactic sugar, which can help us easily implement two-way binding of form elements. When we need to use the v-model directive in a custom component, we can simulate the internal implementation of Vue and use the model and update:modelValue attributes and the $emit method to complete the two-way binding function. Using this method, we can easily build custom components and achieve two-way data binding with other components.

The above is the detailed content of How to simulate v-model with vue component. For more information, please follow other related articles on the PHP Chinese website!