在vue3.4版本中,defineModel进入稳定版。我们可以使用defineModel来优化父子组件中的双向绑定。在3.3之前的版本中,双向绑定需要在使用props和emits传值,现在我们只需要一行代码就可以解决这个问题:const 变量名=defineModel()
在子组件Helloworld.vue中:
<template>
<div class="page">
<input
type="text"
:value="fonts"
@input="(e:any) => (fonts= e.target.value)"
size="large"
class="inputBox"
/>
</div>
</template>
<script lang="ts" setup>
const fonts = defineModel();
</script>
<style scoped lang="less">
.page {
width: 600px;
height: 150px;
}
</style>
在父组件中:
<template>
<div class="home">
<div class="mian">
<div class="text">{{ fonts }}</div>
<HelloWorld v-model="fonts" />
</div>
</div>
</template>
<script lang="ts" setup>
import HelloWorld from "@/components/HelloWorld.vue";
import { ref } from "vue";
const fonts = ref<string>("aaa");
</script>
<style>
.home {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
</style>
再看看效果