uni-app 快手小程序 无法获取ref

uni-app 快手小程序 无法获取ref

类别 信息
产品分类 uniapp/小程序
PC开发环境 Windows
操作系统版本 windows10
HBuilderX类型 Alpha
HBuilderX版本 4.54
工具版本号 1.66.0
基础库版本 1.100.0
项目创建方式 HBuilderX

示例代码：

<template>  
    <view class="container">  
        <view class="main">  
            <z-paging  
                ref="paging"  
                v-model="indexData"  
                @query="getData"  
                :fixed="false"  
                height="100%"  
            >  
            </z-paging>  
        </view>  
    </view>  
</template>  
<script setup lang="ts">  
import { ref } from 'vue'  
const paging = ref()  
const indexData = ref<any>({})  
const getData = async () => {  
    try {  
        console.log(paging.value,'pag')  

    } catch (error) {  
        paging.value.complete(false)  
    }  
}  
</script>

操作步骤：

<template>  
    <view class="container">  
        <view class="main">  
            <z-paging  
                ref="paging"  
                v-model="indexData"  
                @query="getData"  
                :fixed="false"  
                height="100%"  
            >  
            </z-paging>  
        </view>  
    </view>  
</template>  
<script setup lang="ts">  
import { ref } from 'vue'  
const paging = ref()  
const indexData = ref<any>({})  
const getData = async () => {  
    try {  
        console.log(paging.value,'pag')  

    } catch (error) {  
        paging.value.complete(false)  
    }  
}  
</script>

预期结果：

获取到组件实例

实际结果：

实际paging.value 结果为null

bug描述：

代码中无法获取到 ref ，paging.value的值为null

image

image


更多关于uni-app 快手小程序 无法获取ref的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

hello ，更新一下hbuilderx版本看一下

更多关于uni-app 快手小程序 无法获取ref的实战教程也可以访问 https://www.itying.com/category-93-b0.html


<script lang="ts" setup> import { ref, shallowRef } from "vue"; import { apiHotLists } from "@/api/store"; import CourseList from "@/components/course-list/index.vue";

const paging = shallowRef(); const hotData = ref<any>([]);

const queryList = async (pageNo: number, pageSize: number) => { try { const { lists } = await apiHotLists({ page_no: pageNo, page_size: pageSize, }); console.log(lists); paging.value.complete(lists); } catch (e) { paging.value.complete(false); } }; </script>

这段代码是在分包里面的

这是一个快手小程序特有的ref获取问题。在快手小程序环境中，使用<script setup>语法时，需要通过特殊方式获取ref：

  1. 确保组件已正确引入并注册
  2. 尝试改用传统options API写法：
export default {
  data() {
    return {
      indexData: {}
    }
  },
  methods: {
    getData() {
      console.log(this.$refs.paging) // 这里应该能获取到实例
    }
  }
}
  1. 如果必须使用composition API，可以尝试：
const paging = ref(null)
onMounted(() => {
  console.log(paging.value) // 在mounted生命周期获取
})
回到顶部