-
vue3组件支持v-model
-
Vue2
v-model
语法糖原理::value="数据"
@input="数据=$event"
-
Vue3
v-model
语法糖原理::modelValue="数据"
@update:modelValue="数据=$event"
-
父组件
<CartTest v-model="count" />
components: { CartTest },
setup() {
const count = ref(0);
return { count };
},
子组件
<template>
<div>
cart-test组件 计数器:{{ modelValue }}
<button @click="updateCount">+1</button>
</div>
</template>
<script>
export default {
name: "CartTest",
props: {
modelValue: {
type: Number,
},
},
emits: ["update:modelValue"],
setup(props, { emit }) {
console.log(props.modelValue);
const updateCount = () => {
// 通知父组件,让父组件去修改
emit("update:modelValue", props.modelValue + 1);
};
return { updateCount };
},
};
</script>