213字 1.1分钟
Code在vue开发中，通常会对一个自定义的组件进行封装，并实现v-model双向绑定功能
在 Vue 2 中，通常这样实现
父组件
<template>
<Child v-model="number"></Child>
</template>
<script>
export default {
data() {
return {
number: 0,
};
},
components: {
Child: () => import("./Child.vue"),
},
};
</script>子组件
<template>
<button @click="handleClick">{{ value }}</button>
</template>
<script>
export default {
props: {
value: Number,
},
methods: {
handleClick() {
// 通过emit一个input事件出去，实现 v-model
this.$emit("input", this.value + 1);
},
},
};
</script>在 vue 3 中，通过这样实现
父组件
<template>
<Child v-model="number"></Child>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
setup() {
const number = ref(0);
return {
number,
};
},
});
</script>子组件
<template>
<button @click="handleClick">{{ value }}</button>
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
props: {
// 更换成了 modelValue
modelValue: Number,
},
setup(props, { emit }) {
// 关闭弹出层
const handleClick = () => emit("update:modelValue", props.modelValue + 1);
return { handleClick };
},
});
</script>