uni-app uts setup 调用子组件方法

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app uts setup 调用子组件方法

使用vue 3.0 + uts + setup 如何调用子组件方法，使用图上方式无法编译，语法矫正功能无提示错误，下面时页面全部代码，组件为社区上的z-paging-x版本

<template>  
    <z-paging-x ref="listRef" v-model="listData"  @query="queryList" :auto="false">  
        <template v-slot:top>  
            <view class="home_navber">  
                <text class="navberTitle">换客</text>  
                <view class="SearchBox">  
                    <uni-icons type="scan" size="42rpx"/>  
                    <swiper class="content_swiper" :autoplay="true" :vertical="true">   
                        <swiper-item>  
                            <text class="item">电脑</text>  
                        </swiper-item>  
                        <swiper-item>  
                            <text class="item">手机</text>  
                        </swiper-item>  
                        <swiper-item>  
                            <text class="item">相机</text>  
                        </swiper-item>  
                    </swiper>  
                    <view class="searchButton">  
                        <uni-icons type="search" size="36rpx" color="#fff" />  
                    </view>  
                </view>  
            </view>  
        </template>  
        <list-item v-for="(itme,index) in 50" :key="index" :type="index">  
            <productCard />  
        </list-item>  
    </z-paging-x>  
</template>  

<script lang="uts" setup>  
const listData=ref<Array<object>>[])

const listRef=ref<ZPagingXComponentPublicInstance | null>(null)  

const queryList=(pageNo: number, pageSize: number)=>{  
    (listRef.value as  ZPagingXComponentPublicInstance |  null)?.complete([])  
    console.log(pageNo,pageSize);  
}  
</script>  

<style lang="scss">  
.home_navber{  
    width:100%;  
    height:160rpx;  
    background-color:#fff;  
    box-shadow: $box-show;  
    padding-top: var(--status-bar-height);  
    justify-content: center;  
    padding-left:20rpx;  
    padding-right:20rpx;  
    box-sizing: border-box;  
    flex-direction: row;  
    align-items: center;  
    .SearchBox{  
        flex:1;  
        border:solid 1rpx black;  
        padding:10rpx;  
        border-radius:$border-Max;  
        height:60rpx;  
        align-items: center;  
        flex-direction: row;  
        .content_swiper{  
            flex:1;  
            .item{  
                color:$text-comp-color;  
            }  
            margin:0rpx 20rpx;  
        }  
        .searchButton{  
            width: 80rpx;  
            height: 40rpx;  
            background-color: $theme-Color;  
            border-radius: $border-Max;  
            align-items: center;  
        }  
    }  
    .navberTitle{  
        font-size:42rpx;  
        font-weight: bold;  
        margin-right:20rpx;  
    }  
}  
</style>  

![图片](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20240922/087175406e8a20660ef749385b4c480f.png)

Harmonyos Next教程
4 回复

你好，插件市场的插件问题，可以尝试一下在插件市场中的插件中评论，这样作者能够看到


好的

你的写法不对，正确调用complete应该是：listRef.value?.complete?.([])。调用父组件方法写法请参见uniappx官方文档：https://doc.dcloud.net.cn/uni-app-x/vue/component.html#call-component-method

在 uni-app 中，通过 setup 语法调用子组件的方法需要结合 ref 和 expose 方法来实现。以下是一个具体的代码案例，展示如何在父组件中调用子组件的方法。

子组件 (ChildComponent.vue)

首先，在子组件中定义一个方法，并使用 expose 方法将其暴露给父组件。

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Hello from Child Component');

// 定义子组件方法
const childMethod = () => {
  message.value = 'Child Method Called!';
};

// 使用 expose 方法暴露给父组件
expose({
  childMethod
});
</script>

父组件 (ParentComponent.vue)

在父组件中，通过 ref 获取子组件的引用，并在需要时调用子组件的方法。

<template>
  <view>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 创建子组件引用
const childRef = ref(null);

// 定义调用子组件方法的方法
const callChildMethod = () => {
  if (childRef.value) {
    // 调用子组件的 exposed 方法
    childRef.value.childMethod();
  }
};

// 可选：在组件挂载后确认引用是否正确获取
onMounted(() => {
  console.log('Child Component Ref:', childRef.value);
});
</script>

注意事项

  1. expose 方法：在 setup 语法中，组件的方法默认是私有的，需要通过 expose 方法暴露给父组件。
  2. ref 获取引用：父组件通过 ref 获取子组件的引用，并在需要时调用暴露的方法。
  3. 时机问题：确保在调用子组件方法时，子组件已经被正确渲染和引用。在上面的例子中，onMounted 钩子用于调试和确认引用是否正确获取。

这个示例展示了如何在 uni-app 中通过 setup 语法调用子组件的方法。在实际项目中，可能需要根据具体需求进行调整和扩展。

回到顶部