uniapp setup引入组件
时间: 2025-02-10 15:59:31 浏览: 45
### 如何在 UniApp Setup 中引入组件
#### 使用 `<script setup>` 的最佳实践
为了确保 `setup` 语法下的子组件方法可以在父组件中被调用,在定义子组件时需使用 `defineExpose()` 显式暴露希望对外可见的方法[^2]。
对于子组件而言:
```vue
<template>
<!-- 子组件模板 -->
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const getList = async () => {
console.log('获取列表')
}
// 暴露给父组件的方法
defineExpose({
getList,
})
</script>
```
此方式允许父组件通过其引用访问这些已公开的方法。当采用这种方式时,可以避免因 Vue 生命周期差异带来的潜在问题,比如某些情况下直接操作未完全初始化的实例可能导致的行为异常。
#### 父组件中的引用与交互
在父组件内,则应先声明一个响应式的引用变量来保存子组件实例,并利用该引用触发子组件内的函数:
```vue
<template>
<view class="page">
<!-- 条件渲染子组件并绑定事件监听器以及设置ref属性 -->
<home v-if="PageCur === 0" @getPageCur="getPageCur" ref="HomeRef"></home>
</view>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import Home from './path/to/Home.vue' // 假设这是子组件路径
const PageCur = ref(0)
const HomeRef = ref(null)
const getPageCur = (value) => {
PageCur.value = value
}
const callGetListFromChild = () => {
if (HomeRef.value && typeof HomeRef.value.getList === 'function') {
HomeRef.value.getList()
}
}
</script>
```
这里需要注意的是,由于存在条件渲染 (`v-if`) ,因此应当检查 `HomeRef.value` 是否确实指向了一个有效的对象再尝试调用它的成员函数,防止可能出现的错误。
#### 处理常见问题
- **异步加载场景下可能遇到的问题**
如果涉及到懒加载或其他形式的动态导入,可能会导致初次访问时无法立即获得预期的结果。此时可以通过侦听 `$refs` 变化或等待下一个 tick 后再去执行相关逻辑以确保 DOM 已经更新完成。
- **生命周期不同步引发的问题**
有时即使按照上述做法也可能因为父子组件间不同的挂载顺序而出现问题。这时可考虑调整组件结构设计或是借助 Vuex/Provide-Inject 这样的状态管理工具来进行跨层通信。
阅读全文
相关推荐


















