vue自定义组件使用v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件
举例说明

• 子组件

<template>
  <div>
    <input type="text" :value="value" v-on:change="changeEvent" />
  </div>
</template>

<script>
export default {
  props: {
    value: String,
  },
  methods: {
    changeEvent(e) {
      this.$emit("input", e.target.value);
    },
  },
};
</script>

<style lang="scss" scoped>
</style>

• 父组件

<Test v-model="name" />
//v-model相当于在组件上绑定了一个名为value的属性和一个input的方法(在input方法中修改属性的值)
<Test value="小明" @input="....."></Test>
 ...
export default {
  components: {
    Test,
  },
  data() {
    return {
      name: "小明",
    };
  },

上面是最原始的v-model绑定的本质

如果想更变绑定的属性值和方法名

子组件

<template>
  <div>
    <input type="text" :value="showName" v-on:change="changeEvent" />
  </div>
</template>

<script>
export default {
  model: {
    prop: "showName", //自定义属性的名字,切记要在props中声明
    event: "changeName", //自定义方法名
  },
  props: {
    showName: String, 
  },
  methods: {
    changeEvent(e) {
      this.$emit("changeName", e.target.value);
    },
  },
};
</script>

父组件

<Test v-model="name" />
//v-model相当于在组件上绑定了一个名为showName的属性和一个changeName的方法(在changeName方法中修改属性的值)
<Test value="小明" @input="....."></Test>
 ...
export default {
  components: {
    Test,
  },
  data() {
    return {
      name: "小明",
    };
  },