欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 汽车 > 维修 > uniapp中父组件调用子组件方法

uniapp中父组件调用子组件方法

2025/2/19 9:31:03 来源:https://blog.csdn.net/qq_43606145/article/details/144148865  浏览:    关键词:uniapp中父组件调用子组件方法

实现过程(setup语法糖形式下)

  1. 在子组件完成方法逻辑,并封装。
  2. 在子组件中使用defineExpose暴露子组件的该方法。
  3. 在父组件完成子组件ref的绑定。
  4. 通过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><!-- 绑定ref --><ContentInput name="xxx" ref="contentInputRef"/>
</template><script setup>// 导入组件import ContentInput from '@/components/content/content.vue';// 定义refconst contentInputRef = ref(null)// 调用子组件所暴露的方法contentInputRef.value.contentIsEmpty()
</script><style lang="scss" scoped>
</style>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词