Example code of vue custom component to implement v-model two-way binding data

In the project, you will encounter custom public components for the project to call. Normally, you can use props to define parameters to receive the parameters passed by the parent component, and then return data to the parent component through the $emits() method of the child component.

Similar to the following:

Parent Component

<common-checkbox :checked="goodsSelected" class="left" :height="'16px'" :width="'16px'" @checkChange="checkChange"></common-checkbox>

     /**
     * Receive subcomponent feedback for processing */
    checkChange(value) {
      this.goodsSelected=value //Assign subcomponent data to parent component}

Subcomponents

    /**
     * Toggle selected postback */
    toggleCheck(value) {
      this.$emit('changeCheck', value)//Return method, return the changed data of the child component to the parent component for processing}

However, this way of writing requires additional processing methods to be written on the page that calls the public component, and it seems too low-level. Can we declare direct v-model two-way binding like the public components that come with the framework? Next, we will provide a solution to this situation that is actually encountered in the project.

First way:

Normally, when you bind the v-model attribute to a child component in the parent component, the child component will default to the data bound to the v-model and assign it to the props attribute named value of the child component. The value still needs to be declared in the props of the child component in advance, otherwise it will not be received.

When the value is modified, it is not immediately passed back to the parent component in both directions. If you want to pass back and synchronously update the v-model of the parent component, you need to do the following

 this.$emit('input', value) 

When the event of two-way binding return is not declared, it is returned by input event by default. Why is it said "when the event of two-way binding return is not declared"? This is the second way, which will be discussed below.

Simply put, the first way to implement this is to first bind the parent component data to v-model, then automatically receive the props property of the child component value, and finally call this.$emit('input', value) to pass back to the parent component when the data changes. In this way, the parent component can achieve two-way binding without additionally implementing the child component's return.

Second way:

It was mentioned earlier that "when no two-way binding callback event is declared", input callback is used by default. If so, then it exists. What if I don't use input? This requires understanding a special property of Vue: model. This property can be used to declare which field the child component uses to receive the two-way bound data, and which method callback to use to update the data of the parent component v-model. The writing method is as follows:

export default {
  name: 'CommonCkeckBox',
  model: {
    prop: 'checked',
    event: 'changeCheck'
  },
    props: {
    checked:
      type: Boolean,
      default: false,
    }, // Selected state}
  }

This way of writing means that the parent component's two-way binding data will be bound to the child component's props property named checked, and when the child component calls this.$emit('changeCheck', value), the parent component's data will be updated synchronously to achieve two-way binding.

The following is a custom checkbox code for reference:

<template>
<div class="check-box-container" @click="toggleCheck()" :style="{width:width,height:height}">
        <div class="checkbox-icon">
              <!-- Three states: selected, unselected, disabled -->
              <img alt :src="`${$cdnImageUrl}/cart/icon-selected.png`" :width="width" :height="height" key="select" v-if="checked&&!disabled"/>
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" key="unselected" v-if="!checked&&!disabled" />
              <img alt :src="`${$cdnImageUrl}/cart/icon-unselected.png`" :width="width" :height="height" class="disabled" key="unselected" v-if="disabled"/>
            </div>
        <slot></slot>
</div>
</template>
<script>
/**
 * Global unified pop-up window */
export default {
  name: 'CommonCkeckBox',
  model: {
    prop: 'checked',
    event: 'changeCheck'
  },
  props: {
    checked:
      type: Boolean,
      default: false,
    }, // selected state disabled: {
      type: Boolean,
      default: false,
    }, // Whether to disable width: {
      type: String,
      default: '16px',
    }, //Button default width height: {
      type: String,
      default: '16px',
    }, //Button default height},
  created() {
  },
  data() {
    return {
    }
  },
  methods: {
    /**
     * Toggle selected postback */
    toggleCheck() {
      this.$emit('changeCheck', !this.checked)
      this.$emit('toggleCheck')
    }
  },
  watch:
    checked:
      handler(newValue, oldValue) {
      //Open state change event this.$emit('onChange')
      },
      deep: true
    }
  },
}
</script>
<style lang="scss" scoped>
.check-box-container{
    display: inline-block;
    .checkbox-icon{
        img{
          transform: translateZ(0);
          will-change: auto;
        }
        .disabled{
          background-color:#f5f5f5;
          border-radius: 50%;
        }
    }
}
</style>

Parent component:

      <common-checkbox v-model="item.goodsSelected" class="left" :width="'16px'" :height="'16px'"></common-checkbox>

The specific method to be used depends on the project scenario. If the first method does not meet the requirements, you can try the second method.

Summarize

This is the end of this article about vue custom components to implement v-model two-way binding data. For more relevant vue v-model two-way binding data content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!