vue3中父子组件数据同步的默认方式update:xxx

理解数据结构如数组和链表，它们是编程中的基础数据组织方式。 #生活技巧# #数码产品使用技巧# #编程入门指南#

update:xxx 是Vue 3中实现自定义v-model的约定。它的工作原理是：

子组件通过emit('update:propName', newValue)通知父组件需要更新某个属性
父组件可以通过v-model:propName="data"或@update:propName="data = $event"来接收这个更新

父组件：

<template> <div class="container"> <CountShow :count="count"></CountShow> <CountUpdate :count="count" @update:count="count = $event"></CountUpdate> </div> </template> <script setup> import { ref } from 'vue' import CountShow from "./CountShow.vue" import CountUpdate from "./CountUpdate.vue" const count = ref(0) </script> <style scoped> .container { margin-top: 20px; } </style>

子组件：

<template> <select v-model.number="step"> <option value=1 selected>1</option> <option value=2>2</option> <option value=3>3</option> </select> <button @click="increaseCount">增加</button> <button @click="decreaseCount">减少</button> <button @click="oddIncreaseCount">奇数增加</button> <button @click="asyncIncreaseCount">异步增加（延迟1秒）</button> </template> <script setup> import { ref, computed } from 'vue' const props = defineProps({ count: { type: Number, default: 0 } }) const step = ref(1) const emit = defineEmits(['update:count']) const increaseCount = () => { emit('update:count', props.count + step.value) } const decreaseCount = () => { emit('update:count', props.count - step.value) } const oddIncreaseCount = () => { if (props.count % 2 === 1) { emit('update:count', props.count + step.value) } } const asyncIncreaseCount = async () => { await new Promise(resolve => setTimeout(resolve, 1000)) emit('update:count', props.count + step.value) } </script>

思考：上面是把数据count放在父组件中，更新数据count的功能按钮放在了子组件中。那么，如果把更新数据的功能也放在父组件中呢？

如下：

父组件

<template> <div class="container"> <CountShow :count="count"></CountShow> <CountUpdate @increase="handleIncrease" @decrease="handleDecrease" /> </div> </template> <script setup> import { ref } from 'vue' import CountShow from "@/components/counter/CountShow.vue" import CountUpdate from "@/components/counter/CountUpdate.vue" const count = ref(0) // 父组件中的更新函数 defineExpose({ handleIncrease: (step) => { count.value += step }, handleDecrease: (step) => { count.value -= step } }) </script>

子组件：

<template> <div> <select v-model.number="step"> <!-- 选项不变 --> </select> <button @click="$emit('increase', step.value)">增加</button> <button @click="$emit('decrease', step.value)">减少</button>//$emit又是一种触发事件的用法 <!-- 其他按钮类似修改 --> </div> </template> <script setup> import { ref } from 'vue' const step = ref(0) defineEmits(['increase', 'decrease', 'oddIncrease', 'asyncIncrease']) </script>

网址：vue3中父子组件数据同步的默认方式update:xxx https://c.klqsh.com/news/view/343274

相关内容

Vue 官方发布了八个提升 Vue3 开发幸福感的小技巧
网盘分享,WPFX.ORG,网盘资源网站,网盘资源搜索,免费资源网盘搜索,网盘资源分享,百度网盘资源,阿里云盘资源,天翼云盘资源,夸克网盘资源,迅雷云盘资源,蓝奏云盘资源,360云盘资源,腾讯云盘资源,网盘资料分享
U盘格式化后数据如何恢复？用DiskGenius四步轻松搞定
小组合作学习方式在初中数学课堂教学中的应用
优盘格式化后还能恢复数据吗？3个方法实操，解决成功率超高！
数字游民生活方式：最新统计数据与趋势解析
亲子互动中多一些幽默感，父母和孩子都受益
layer 弹出层组件
提升社交圈子数据处理性能的方法及装置与流程
浙江大学数据科学研究中心

随便看看