Vue3 组件双向绑定的两种方法

海上彼尚2024-08-07 17:37

defineProps 和 defineEmits

案例：

html 复制代码

# child
<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
</script>

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

html 复制代码

# father
<Child
  :modelValue="foo"
  @update:modelValue="$event => (foo = $event)"
/>

defineModel

Vue 官网是这样描述的：从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 因此，以后这个是实现组件双向绑定的首选。

案例：

html 复制代码

# child

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

html 复制代码

# father

<Child v-model="countModel" />