uniapp：父组件调用子组件方法

最新推荐文章于 2024-07-08 14:21:34 发布

陆杨丶

最新推荐文章于 2024-07-08 14:21:34 发布

阅读量4k

点赞数 1

分类专栏： uniapp 文章标签： vue.js

本文链接：https://blog.csdn.net/Lyang666/article/details/122820297

版权

uniapp 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文展示了在Vue框架下，如何通过`ref`属性实现父组件调用子组件的方法。在父组件的模板中，通过`$refs`可以访问到子组件实例并调用其定义的方法。子组件定义了`log`方法，当父组件的`onClick`事件触发时，会调用子组件的`log`方法，打印出相关信息。这体现了Vue中组件间的交互机制。

摘要由CSDN通过智能技术生成

1:父组件

<template>
	<view>
           <!-- 子组件 -->
		<x-text ref='xText'></x-text>
        <view @click='onClick'>点击调用子组件方法</view>
	</view>
</template>


<script>
    // 此处引入省略...
    
    methods: {
        onClick(){
            // 根据ref 调用子组件方法
            this.$refs.xText.log();
        }
    }
</script>

2：子组件 x-text

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


<script>
    // 此处省略...
    
    methods: {
        log(){
            // 子组件log方法
            console.log('我是子组件的log方法');
        }
    }
</script>