实现过程(setup语法糖形式下)
- 在子组件完成方法逻辑,并封装。
- 在子组件中使用defineExpose暴露子组件的该方法。
- 在父组件完成子组件ref的绑定。
- 通过ref调用子组件暴露的方法。
子组件示例
<template>
</template><script setup>
import { defineEmits } from 'vue';
const contentIsEmpty = () => {uni.showModal({title: `请先完成"${props.name}"的输入`,showCancel: false})
}
defineExpose({contentIsEmpty
})
</script><style lang="scss" scoped>
</style>
父组件示例
<template><ContentInput name="xxx" ref="contentInputRef"/>
</template><script setup>import ContentInput from '@/components/content/content.vue';const contentInputRef = ref(null)contentInputRef.value.contentIsEmpty()
</script><style lang="scss" scoped>
</style>