vue3 update:modelvalue

`vue3 update:modelValue`是Vue3中针对`v-model`的更新方式，它可以通过`update:modelValue`事件来更新组件的值。在Vue2中，该事件的名称为`input`。该更新方式可以使组件更加灵活地处理与父组件通信的逻辑。

相关问题

update:modelValue暴露的v-modle , 如何watch

在 Vue3 中，`v-model` 属性通常与 `ref` 结合使用，`update:modelValue` 是一个自定义事件，它会在 `v-model` 的值更新时触发。如果你想监听这个值的变化，可以像下面这样创建一个 `watch`：

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

<script setup>
import { ref, onMounted } from 'vue';

const modelValue = ref('');

onMounted(() => {
  // 初始化时也可以直接 watch
  watch(modelValue, (newValue) => {
    console.log('Model value updated:', newValue);
  });
});

// 或者你可以使用 `setup` 中的 `useEffect` 来代替 onMounted
// 在每次模型值变化时都会执行
useEffect(() => {
  watch(modelValue, ...);
}, [modelValue]);
</script>

在这里，我们在输入框上绑定了 `modelValue`，并在用户修改输入框内容时通过 `@input` 事件触发 `update:modelValue` 并更新内部的 `modelValue`。然后在 `watch` 函数里，每当 `modelValue` 变化，就会打印出新的值。

就update:modelValue实现子组件与父组件双向绑定

好的，下面是一个关于如何使用 `update:modelValue` 实现子组件与父组件双向绑定的示例：

父组件（Parent.vue）：

<template>
  <div>
    <h2>父组件</h2>
    <Child v-model="message" />
    <p>父组件的消息：{{ message }}</p>
  </div>
</template>

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

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

子组件（Child.vue）：

<template>
  <div>
    <h3>子组件</h3>
    <input type="text" :value="value" @input="$emit('update:modelValue', $event.target.value)" />
    <p>子组件的消息：{{ value }}</p>
  </div>
</template>

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

在这个示例中，父组件通过 `v-model` 绑定了子组件的 `message` 属性。子组件接收到父组件的值后，使用 `:value` 绑定到输入框上，并通过 `@input` 监听输入框的变化，然后使用 `$emit` 方法触发 `update:modelValue` 事件并将新的值传递给父组件。

这样，当子组件的输入框发生变化时，父组件的 `message` 属性也会跟着更新，实现了双向绑定。

希望这个示例对你有帮助！如有任何疑问，请随时提问。