在
Vue3中，通过使用v-model实现父子
组件的双向数据绑定的方式与
Vue2有所不同。在
Vue3中，我们可以使用`e
mit`和`on`来实现父子
组件间的双向绑定数据。
在父
组件中，我们可以通过`v-model`指令绑定一个值，并使用`@update:modelValue`事件和`$e
mit`方法来更新这个值。在子
组件中，我们可以通过`
props`接收父
组件传递的值，并在需要更新该值的时候使用`$e
mit`触发`update:modelValue`事件。
以下是一个使用
Vue3和TypeScript实现父子
组件间双向绑定数据的示例：
父
组件：
```html
<template>
<div class="father">
<div class="context">
<h1>这是父
组件fatherNum:{{ fatherNum }}</h1>
<Son v-model="fatherNum"></Son>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, ref } from '
vue';
import Son from '../components/Son.
vue';
export default defineComponent({
components: {
Son
},
setup() {
const fatherNum = ref(0);
return {
fatherNum
};
}
});
</script>
<style scoped>
.father {
width:
100vw;
height:
100vh;
}
.context {
width:
100%;
height:
100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
</style>
```
子
组件：
```html
<template>
<div class="son">
<button @click="increment">增加</button>
<button @click="decrement">减少</button>
<p>这是子
组件sonNum: {{ modelValue }}</p>
</div>
</template>
<script lang="ts">
import { defineComponent, computed, e
mit } from '
vue';
export default defineComponent({
props: {
modelValue: {
type: Number,
required: true
}
},
setup(
props, { e
mit }) {
const increment = () => {
e
mit('update:modelValue',
props.modelValue + 1);
};
const decrement = () => {
e
mit('update:modelValue',
props.modelValue - 1);
};
return {
increment,
decrement
};
}
});
</script>
<style scoped>
.son {
display: flex;
}
</style>
```
在这个示例中，父
组件中的`fatherNum`通过`v-model`指令与子
组件中的`modelValue`进行双向数据绑定。父
组件中的值变化时，会触发`update:modelValue`事件，子
组件监听该事件并根据需要更新自己的值。
希望对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [
vue3+
vite+ts--
组件使用v-model实现双向绑定（
vue2&
vue3+ts的详细讲解）](htt
ps://blog.csdn.net/m0_60893808/article/details/131244155)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width:
100%"]
[ .reference_list ]
订阅专栏 解锁全文
2261
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
