vue项目中的自定义v-model

vue项目中的自定义v-model：

1. v-model：默认是基于input框定制，所以只会接受value属性和input事件的响应。
2. 可以通过model选项来配置接受的props和event：如下例子

例子：
//子组件
<template>
  <div v-if="show">
    <p>定制 v-model</p>
    <button @click="close">关闭组件</button>
  </div>
</template>

<script>
export default {
  //配置model
  model: {
    prop: "show",
    event: "close"
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  },
  methods: {
    close() {
      this.$emit("close", false);
    }
  }
};
</script>

//父组件
<template>
  <div>
      <button @click="show=true"> 打开model</button>
      <child v-model="show"></child>
      <!-- 等同于 -->
      <!-- <child :show="show" @close='show=$event'></child> -->
  </div>
</template>

<script>
import child from './child.vue'
export default {
    components:{
        child
    },
  data() {
    return {
        show:false
    };
  },
};
</script>