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

Vue.js 中的 `v-model` 是单向数据流（Single-Way Data Binding）的核心特性之一，但在处理自定义组件时，我们可以利用它实现组件间的双向数据绑定。当在自定义组件上使用 `v-model`，实际上是在组件的模板上创建了一个响应式的绑定点，该绑定点会连接到组件实例的属性。

例如，在一个简单的自定义组件 `CustomInput.vue`：

<template>
  <input type="text" v-model="value">
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
};
</script>

当你在父组件中这样使用这个自定义组件：

<custom-input v-model="parentValue"></custom-input>

此时，`parentValue` 的值会被自动同步到 `custom-input` 组件的输入框中，并随其改变而更新。同样，当你在输入框内输入内容，`parentValue` 也会相应地接收到新的值。这就是 Vue 中通过 `v-model` 实现自定义组件之间双向数据绑定的方式。

相关问题

VUE2.0 自定义组件 v-model双向绑定示例

在 Vue.js 2.0 中，`v-model` 是一个非常强大的指令，用于实现数据绑定和表单输入的双向数据同步。自定义组件中使用 `v-model` 可以让你的用户输入自动更新组件的内部状态，并反之亦然。

以下是一个简单的自定义组件（例如一个名为 `CustomInput` 的输入框组件）的 `v-model` 示例：

<template>
  <div>
    <input type="text" v-model="inputValue">
    <p>你输入的是: {{ inputValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
    };
  },
};
</script>

在这个例子中：
- `<input type="text" v-model="inputValue">`：将输入框的值绑定到 `inputValue` 数据属性上，用户在输入框中修改的任何内容都会实时更新 `inputValue`。
- `<p>你输入的是: {{ inputValue }}</p>`：当 `inputValue` 发生变化时，对应的文本也会根据新的值显示。

如果你在父组件中使用这个自定义组件：

<template>
  <div>
    <custom-input></custom-input>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue';

export default {
  components: {
    CustomInput,
  },
};
</script>

并且希望父组件的数据影响子组件，你可以在父组件的数据中设置默认值并传递给子组件：

<template>
  <div>
    <custom-input :value="parentValue"></custom-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentValue: '初始值',
    };
  },
  components: {
    CustomInput: {
      props: ['value'], // 定义接收父组件传入的值
      data() {
        return {
          inputValue: this.value, // 在子组件中设置默认值
        };
      },
    },
  },
};
</script>

vue自定义组件v-model

回答: 在Vue中，我们可以通过自定义组件的v-model来实现双向数据绑定。默认情况下，v-model在组件上使用modelValue作为prop，并以update:modelValue作为对应的事件。可以通过给v-model指定一个参数来更改这些名字。例如，可以这样使用自定义组件v-model：`<MyComponent v-model:title="bookTitle" />`\[1\]。

另一种实现v-model的方式是使用一个可写的计算属性，同时具有getter和setter。getter方法返回modelValue prop的值，而setter方法触发相应的事件。下面是一个示例组件的代码：

// CustomInput.vue
<script>
export default {
  props: \['modelValue'\],
  emits: \['update:modelValue'\],
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}
</script>

<template>
  <input v-model="value" />
</template>

通过这种方式，我们可以在自定义组件中使用v-model来实现双向数据绑定\[2\]。

此外，组件的v-model上添加的修饰符可以通过modelModifiers prop在组件内访问到。在组件中声明modelModifiers prop，并将其默认值设置为一个空对象。通过这种方式，我们可以在组件中访问到v-model的修饰符。例如，在下面的组件中，我们声明了modelModifiers这个prop，并在created钩子函数中打印出了modelModifiers的值：

<script>
export default {
  props: {
    modelValue: String,
    modelModifiers: { default: () => ({}) }
  },
  emits: \['update:modelValue'\],
  created() {
    console.log(this.modelModifiers) // { capitalize: true }
  }
}
</script>

<template>
  <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>

通过这种方式，我们可以在自定义组件中使用v-model的修饰符\[3\]。
#### 引用[.reference_title]
- *1* *2* *3* [Vue 自定义组件中 v-model 的使用](https://blog.csdn.net/qq_40179479/article/details/126564499)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]