直接贴官网的内容,以后可以告别封装input使用v-model的烦恼了
官网:cn.vuejs.org/guide/compo…
自己写了个demo:
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value++
}
</script>
<template>
<div>parent bound v-model is: {{ model }}</div>
<input v-model="model"/>
<button @click="update">按钮</button>
</template>
<!--Parent.vue -->
<script setup>
import { ref } from 'vue'
import Child from './Child.vue';
const count = ref(0)
</script>
<template>
<div :style="{ fontSize: postFontSize + 'em' }">
<!-- Parent.vue -->
<Child v-model="count" />
<div>{{count}}</div>
</div>
</template>