文档上写的除支持 vue3 语法特性外,uni-app 特有的生命周期钩子支持 Composition API,如 onLaunch,onShow,onLoad
请问onLoad这些uni-app 特有的生命周期钩子在v3中如何使用,并没有看到例子,说是支持Composition API,是在setup中写onLoad还是onLoad和setup平级?
setup(){
onLoad(options=>{console.log(options)});
}
or
onLoad(options){console.log(options)},
setup(){}
然后自己封装自定义弹窗组件v-model:modelValue没有实现双向绑定, emit(update:modelValue, value)没有起到作用,就是父组件传给子组件是可以的,子组件emit发送事件给父组件传值没有生效
export default defineComponent({
name: 'i-drawer',
props: {
modelValue: {
type: Boolean,
default: false
},
// 此为内部参数,不在文档对外使用,为了解决Picker和keyboard等融合了弹窗的组件
// 对v-model双向绑定多层调用造成报错不能修改props值的问题
popup: {
type: Boolean,
default: true
},
mask: {
type: Boolean,
default: true
},
maskClosable: {
type: Boolean,
default: true
},
// left right bottom top center
mode: {
type: String,
default: 'center'
},
//drawer z-index
zIndex: {
type: [Number, String],
default: 9999
},
//mask z-index
maskZIndex: {
type: [Number, String],
default: 9998
},
backgroundColor: {
type: String,
default: '#fff'
}
},
emits: ['update:modelValue', 'open', 'close'],
setup(props, context) {
const { emit } = context
const visible = computed({
get() {
return props.modelValue
},
set(val) {
if (props.popup) {
emit('update:modelValue', val)
}
}
})
const open = () => {
visible.value = true
emit('open')
}
const close = () => {
visible.value = false
emit('close')
}
watch(
() => props.modelValue,
nVal => {
if (nVal) {
open()
} else {
close()
}
}
)
const handleMaskClick = () => {
if (!props.maskClosable) {
return
}
close()
}
return {
visible,
handleMaskClick
}
}
})
4 个回复
5***@qq.com
同样,this.$emit('update:modelValue', index) 无效,但是用 this.$emit('input', index) 却好用,很神奇
苏陌
setup取代了onLoad
l***@163.com - 学历只是过去,学习决定未来
vue3如何使用生命周期呀,有例子吗?
苏陌
https://ask.dcloud.net.cn/article/39310
2021-10-27 09:22
时光知味
bdbdb