vue自定义组件使用v-model 双向绑定

1.常用例子：一些自定义组件例如radio,checkbox的封装，实现数据双向绑定

2.使用方法提炼：

export default {
    data(){
      return{
       }
    },
    model:{
        prop:'xxx',//接收v-model传入的值,this.xxx访问
        event:'xxxx'//emit发送出去定义的事件：this.$emit('xxxx',改变值)；
      },
    }

以radio封装为例子

实现目标类似element 的raido写法：

父组件parent.vue

  <radio v-model="radio" name="radio" :label="1">足球</radio>
  <radio v-model="radio" name="radio" :label="2">篮球</radio>

子组件radio.vue

<template>
  <div class="radio" @click="handleClick">
    <input type="radio" :name="name" :checked="isChecked" />
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: ["value", "label", "name"],
  model: {
    prop: "value",
    event: "change",
  },
  computed: {
    isChecked() {
      return this.value === this.label;
    },
  },

  methods: {
    handleClick() {
      if (!this.isChecked) {
        this.$emit("change", this.label);
      }
    },
  },
};
</script>
<style scoped>
</style>

进阶封装

嵌套radio-group，实现如下写法：

<radio-group v-model="radio" name="radiogroup">
      <radio  :label="1">中国</radio>
      <radio  :label="2">美国</radio>
      <radio  :label="3">俄罗斯</radio>
  </radio-group>

radio-group.vue

<template>
    <div class="radio-group" >
        <slot></slot>
    </div>
</template>
<script>
export default {
    props:['value','name'],
    model:{
        prop:'value',
        event:'change'
    },
    data(){
        return {

        }
    },
    provide(){
       return {
           radioGroup:this
       }
    },

}
</script>

radio.vue

<template>
  <div class="radio" @click="handleClick">
    <input type="radio" :name="getName" :checked="isChecked" />
    <slot></slot>
  </div>
</template>
<script>
export default {
  props: ["value", "label", "name"],
  inject: {
    radioGroupObj: {
      from: "radioGroup",
      default: "",
    },
  },
  model: {
    prop: "value",
    event: "change",
  },
  computed: {
    isChecked() {
      if (this.radioGroupObj) {
        return this.label === this.radioGroupObj.value;
      }

      return this.value === this.label;
    },
    getName() {
      return this.radioGroupObj.name || this.name || "radio";
    },
  },

  methods: {
    handleClick() {
      if (!this.isChecked) {
        if (this.radioGroupObj) {
          this.radioGroupObj.$emit("change", this.label);
        } else {
          this.$emit("change", this.label);
        }
      }
    },
  },
};
</script>