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