自定义组件如何使用v-model

   v-model 的本质就是语法糖，即：

<input type="text" v-model="name">
//相当于
<input type="text" :value="name" @input="name = $event.target.value">

当我们在自定义组件的时候需要传多个参数并且需要修改的时候,就会产生冲突!

因此

我们可以通过修改model选项来改变v-model的默认行为。这个选项允许我们自定义组件的prop和event，以实现与父组件的双向数据绑定。

下面是一个示例，展示如何使用model选项来改变默认的v-model行为：

Vue.component('CustomComponent', {
  model: {
    prop: 'openDialog', // 将父组件的数据属性名修改为 openDialog
    event: 'open-dialog' // 将触发事件名修改为 open-dialog
  },
  props: {
    openDialog: Boolean // 定义接收父组件数据的 prop
  },
  template: `
    <div>
      <button @click="toggleDialog">{{ openDialog ? '关闭对话框' : '打开对话框' }}</button>
      <slot></slot>
    </div>
  `,
  methods: {
    toggleDialog() {
      this.$emit('open-dialog', !this.openDialog); // 触发自定义事件，并传递新的值
    }
  }
});

 

在上述示例中，我们定义了一个自定义组件CustomComponent，它接收一个名为openDialog的布尔类型的prop。通过设置model选项，我们将父组件中的v-model绑定的属性名修改为openDialog。

在组件的模板中，我们使用openDialog来控制按钮的文本，并通过toggleDialog方法来切换openDialog的值。在toggleDialog方法中，我们使用$emit方法触发自定义事件open-dialog，并传递新的值。

在父组件中，我们可以通过v-model指令来绑定CustomComponent组件的openDialog属性，并监听open-dialog事件来更新父组件的数据。

<template>
  <div>
    <custom-component v-model="showDialog">
      <!-- 自定义组件的内容 -->
    </custom-component>
    <p>父组件中的 showDialog 值: {{ showDialog }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    };
  }
};
</script>

在父组件中，我们可以像使用原生的v-model一样，使用v-model="showDialog"来绑定CustomComponent组件的openDialog属性，并且可以直接访问showDialog来获取和修改父组件中的数据。

通过修改model选项，我们可以灵活地定义自定义组件中v-model的行为，使其适应我们的需求