uni-app 父组件引用子组件时怎么调用子组件的方法

Posted cap-rq

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了uni-app 父组件引用子组件时怎么调用子组件的方法相关的知识,希望对你有一定的参考价值。

1.写一个简单的子组件main/index.vue:

<template>
    <view></view>
</template>

<script>
    export default 
        data()
            return 
        ,
        methods:
            childMethod() 
                console.log(‘childMethod do...‘)
            
        
    
</script>

<style>
</style>

在子组件中有一个childMethod方法

 

2.在父组件中引用这个子组件的childMethod方法:

<template>
    <view class="content">
        <mian-index ref="mainindex"></mian-index>
    </view>
</template>
<script>
    import mainindex from ‘@/pages/main/index/index.vue‘
    export default 
        data() 
            return 

            ;
        ,
        components:
            ‘mian-index‘:mainindex
        ,
        onLoad(e) 
            this.$refs.mainindex.childMethod();
        
    
</script>

<style>
</style>

 

 

说明:

首先,引入子组件文件,然后用ref给子组件一个id标识,然后通过this.$refs.mainindex.childMethod();调用子组件方法

 

 

参考链接:https://www.cnblogs.com/wangxiaoling/p/10250903.html

 

以上是关于uni-app 父组件引用子组件时怎么调用子组件的方法的主要内容,如果未能解决你的问题,请参考以下文章

vue解决父组件调用子组件只执行一次问题

微信小程序父子组件通信

vue子组件怎么调用父组件的方法

react 父组件怎么调用子组件的方法

Vue 父组件向子组件传值,传方法,传父组件整体

父组件引用子组件未定义函数报错