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

最新推荐文章于 2025-06-04 09:35:03 发布

梅山老幺

最新推荐文章于 2025-06-04 09:35:03 发布

阅读量640

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_63443072/article/details/140944833

defineProps 和 defineEmits

案例：

# 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>

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

defineModel

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

案例：

# child

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

<script setup>
const m