的动态网站开发2023今日新闻头条

vue2 中父子组件数据同步 父→子 子→父 如何实现？

v-model=“count” 或者 xxx.sync=“msg”

• v-model 语法糖 完整写法

:value=“count” 和 @input=“count=$event”

• xxx.sync 语法糖 完整写法

:xxx=“msg” 和 @update:xxx=“msg=$event”

现在：一个 v-model 指令搞定，不需要记忆两种语法

vue3 中 v-model 语法糖

借助modelValue和@update:modelValue实现

<cp-radio-btn :modelValue="count" @update:modelValue="count = $event"></cp-radio-btn>
//可以简写为以下:
<cp-radio-btn v-model="count"></cp-radio-btn>//ts部分
<script setup lang="ts">
defineProps<{modelValue: number
}>()defineEmits<{(e: 'update:modelValue', count: number): void
}>()
</script><template><div class="cp-radio-btn">{{ modelValue }}<button @click="$emit('update:modelValue', modelValue + 1)">+1</button></div>
</template><style lang="scss" scoped></style>

另一种用法

 <cp-radio-btn v-model:count="count"></cp-radio-btn><script setup lang="ts">
defineProps<{count: number
}>()defineEmits<{(e: 'update:count', count: number): void
}>()
</script><template><div class="cp-radio-btn">{{ count }}<button @click="$emit('update:count', count + 1)">+1</button></div>
</template><style lang="scss" scoped></style>