文档上写的除支持 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 个回复
idiocy66
同样,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