vue3中嵌套使用vue2使用v-model语法糖封装的公共组件

264 阅读1分钟

页面的展示效果如下: image.png 父组件中使用vue3.0

image.png 子组件中(vue2中的props是使用value接收,但是父组件使用vue3 要使用modelValue去接收):

image.png

子组件中:v-model=“sText”

image.png 使用computed指令:

image.png

set这里不使用$emit('change')因为a-radio-group自带的change事件 会干扰

image.png

不使用computed的时候:

image.png

image.png

当然对于可以直接获取到 event.target.value的input框 可以直接进行简写

image.png

如果不用v-model的语法糖 将是灾难级的

image.png 子组件接收父组件传来的modelValue,并且将父组件的modalValue赋值到自己的radioValue

image.png

子组件将事件传给父组件 image.png

image.png

watch里面父组件传过来的modelValue变化的时候 赋值给radioValue

image.png