A project will encounter a custom public component for the project to call. Normally, you can use the props parameter to receive the parameters passed by the parent component, and then pass data back to the parent component via the child component’s $emits() method. Similar to the following: Parent component

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

Copy the code
     /** * receives the child component's return for processing */
    checkChange(value) {
      this.goodsSelected=value// Assign the child data to the parent
    }
Copy the code

Child components

    /** * Toggle return */
    toggleCheck(value) {
      this.$emit('changeCheck', value)// Returns the changed data of the child component to the parent component
    }
Copy the code

However, this way of writing requires the method of calling the extra page writing of the public component, and it is too low. Can we declare the direct V-Model bidirectional binding like the public component of the framework? The first way is: By default, if you want to bind the v-Model attribute to a child component in the parent component, the child component will give the props property named Value as the data bound to the v-Model. Value must be declared in the child component props before it is received. When a value is modified, it is not immediately passed back bidirectionally to the parent component. If you want to send back to synchronize the v-model of the parent component, you need to do the following

 this.$emit('input', value) 
Copy the code

When no bidirectional binding event is declared, the default is the input event. This is the second way to say “when bidirectional binding event is not declared”, which will be discussed below. $emit(‘input’, value); $emit(‘ output ‘, value); $emit(‘ output ‘, value); In this way, the parent component can implement bidirectional binding without the additional implementation of the child component’s return. The second way: the default “when an event is not declared to be returned by bidirectional binding” is input. There is a special attribute of Vue called model. This attribute can be used to declare which field the child component uses to receive bidirectional bound data, and which method to call back to update the parent component V-Model, as follows:

export default {
  name: 'CommonCkeckBox'.model: {
    prop: 'checked'.event: 'changeCheck'
  },
    props: {
    checked: {
      type: Boolean.default: false,},// Select status}}Copy the code

$emit(‘changeCheck’, value), the parent component’s bidirectional binding is bound to the props property named checked. When the child component calls this.$emit(‘changeCheck’, value), the parent component’s bidirectional binding is synchronized. Checkbox (checkbox);

<template>
<div class="check-box-container"  @click="toggleCheck()" :style="{width:width,height:height}">
        <div class="checkbox-icon">
              <! -- Three states selected not selected 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>
/** * popover */
export default {
  name: 'CommonCkeckBox'.model: {
    prop: 'checked'.event: 'changeCheck'
  },
  props: {
    checked: {
      type: Boolean.default: false,},// Select status
    disabled: {
      type: Boolean.default: false,},// Whether to disable
    width: {
      type: String.default: '16px',},// The button's default width
    height: {
      type: String.default: '16px',},// Default height of the button
  },
  created(){},data() {
    return{}},methods: {
    /** * Toggle return */
    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>
Copy the code

The parent component:

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

The specific method is selected according to the project scenario. If the first method does not meet the requirements, you can try the second method.