vue3 初学者注意点

105 阅读1分钟

父组件使用v-model ,取消.sync

子组件内写法,在更新事件中用emit const emit = defineEmits(['update:modelValue])
const props = defineProps({ modelValue:{

}

})

当多个v-model,子myElInput.vue

const emit = defineEmits(['update:input1','update:input2','update:input3'])
const props = defineProps({

input1:{
    type:String,
    default:''
},
input2:{
    type:String,
    default:''
},
input3:{
    type:String,
    default:''
},

})

父组件使用v-model:xxx ,xxx为['update:input1','update:input2','update:input3']

<myElInput v-model:input1="aaa" v-model:input2="bbb" v-model:input3="ccc"></myElInput>

aaa,bbb,ccc 父组件内进行响应式 setup 写法,不用单独注册组件!,直接引用 reactive 写法,暴露出去需要解构 参考代码 子组件 ` .input-with-select .el-input-group__prepend { background-color: var(--el-fill-color-blank); } .el-input-group { width:60%; } `

父组件 ` html, body, #cesiumContainer { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; } `