How to implement V-model's custom component in Vue?

Vue.js is a very popular open source JavaScript framework in the field of modern front-end development. It simplifies many problems in the front-end development process and makes it easier to develop complex applications through componentization.

One of the very useful features is to easily implement two-way data binding in components using the v-model directive. Although Vue.js provides many built-in input components, if you need a customized input component, you can implement a v-model custom component to meet your needs.

This article will introduce how to use custom components of Vue.js to implement v-model.

How v-model works

In the world of Vue.js, v-model is not magic. In fact, it is just a syntactic sugar that allows us to define the value of the input component and listen for its changes in one go. Under the hood, v-model does do some things, but understanding these details is not necessary.

In an input component with v-model, we can use a prop and an event to implement the behavior of v-model. prop receives the value from the parent component and passes it to the child component. The event listens for changes in the input value in the parent component and passes the new value to the parent component. The two are combined to implement two-way data binding of v-model.

Implementing custom components

In order to use v-model, we need to define a prop named value and an event named input in the component. These two names are fixed and cannot be changed. value is the value in the input component, and the input event is an event that notifies the parent component of changes in the input value.

The following is a simple custom component example that uses the Bootstrap style library to render a text input box:

<template>
  <div class="form-group">
    <label>{{ label }}</label>
    <input
      :id="name"
      :type="type"
      :value="value"
      :placeholder="placeholder"
      @input="$emit('input', $event.target.value)"
      class="form-control"
    />
  </div>
</template>

<script>
export default {
  name: 'MyInput',
  props: {
    name: String,
    label: String,
    value: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: {
      type: String,
      default: ''
    }
  }
};
</script>

There are several key points to note in this component:

1. We define a prop named value and use it in the input box to initialize the value of the input box. Later, this prop will be used to update the value of the input box.
2. @The input property listens to the input event of the input box. This event is triggered when the value of the input box changes. We use the $emit method to send the input event to the parent component, passing the new value as a parameter.

These are all we need. Now, if we use the MyInput component in a parent component to create an input box, we can use the v-model directive for two-way data binding:

<template>
  <div class="container">
    <my-input v-model="name" name="name" label="Name" />
    <p>Hello, {{ name }}!</p>
  </div>
</template>

<script>
import MyInput from './MyInput.vue';

export default {
  name: 'App',
  components: {
    MyInput
  },
  data() {
    return {
      name: ''
    };
  }
};
</script>

Note that we use v-model to bind the name variable with MyInput component for binding. The name variable here is used to store the current value of the input box.

Now, if we enter a value in the input box, we can access this value in the parent component and display a greeting. When we type on the input box, Vue.js will automatically update the value in the parent component and pass it to the value prop of the MyInput component.

Summary

In this article, we briefly introduced how v-model works in Vue.js and demonstrated how to create a custom input component to support v-model. By setting the value prop and input event, we can make the custom component the same as the built-in input component using v-model and provide custom behavior.

This method is useful if you need to create a personalized input component when developing an application. Using it, you can enable your input components for two-way data binding using v-model.

The above is the detailed content of How to implement V-model's custom component in Vue?. For more information, please follow other related articles on the PHP Chinese website!