Vue v-model in Child Components

Vue.js is a popular JavaScript framework for building user interfaces and single-page applications. It provides several powerful features that make it easy to build interactive and dynamic web applications. One of these features is the v-model directive, which allows two-way data binding between form input elements and component data.

When working with Vue components, you may need to pass data from a parent component to a child component and vice versa. This is where the v-model directive comes in handy. It allows you to bind a form input element to a piece of data and automatically sync the value of the input with the data. This makes it easy to create form elements that can be controlled from the parent component and child component.

Let’s take a look at an example of how to use v-model in a child component:

      <template>
        <div>
          <input v-model="childValue" />
        </div>
      </template>

      <script>
        export default {
          props: {
            modelValue: String
          },
          data() {
            return {
              childValue: this.modelValue
            }
          },
          watch: {
            modelValue(newValue) {
              this.childValue = newValue;
            },
            childValue(newValue) {
              this.$emit('update:modelValue', newValue);
            }
          }
        }
      </script>
    

In the example above, we have a child component that accepts a prop called “modelValue” and uses it as the initial value for the input element. We then use the v-model directive to bind the input element to the “childValue” data property. We also use a watcher to update the “childValue” when the “modelValue” prop changes and emit an event to update the “modelValue” when the “childValue” changes.

Another useful feature that Vue provides for working with v-model in child components is defineModel. This function allows you to define the model options for a child component, such as the prop name and event name to use for v-model. Here’s an example of how to use defineModel:

      <script>
        import { defineComponent, defineModel } from 'vue';

        export default defineComponent({
          setup(props, { emit }) {
            return defineModel({
              prop: 'modelValue',
              event: 'update:modelValue'
            });
          }
        });
      </script>
    

With defineModel, you can specify the name of the prop to use for the v-model value and the event name to use for updating the v-model value. This makes it easy to customize the v-model behavior in child components and maintain consistency throughout your application.

In summary, Vue v-model is a powerful feature that allows you to create form input elements that are easily controlled from parent components and child components. By using v-model and defineModel, you can build flexible and reusable form components in your Vue applications.