sonicsunsky
sonicsunsky
  • 发布:2021-09-17 16:58
  • 更新:2021-10-26 19:14
  • 阅读:2188

uni-app vue3使用过程中的问题

分类:uni-app

文档上写的除支持 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  
        }  
    }  
})
2021-09-17 16:58 负责人:无 分享
已邀请:
5***@qq.com

5***@qq.com

同样,this.$emit('update:modelValue', index) 无效,但是用 this.$emit('input', index) 却好用,很神奇

苏陌

苏陌

setup取代了onLoad

l***@163.com

l***@163.com - 学历只是过去,学习决定未来

vue3如何使用生命周期呀,有例子吗?

  • 苏陌

    https://ask.dcloud.net.cn/article/39310

    2021-10-27 09:22

时光知味

时光知味

bdbdb

该问题目前已经被锁定, 无法添加新回复