uniapp父组件调用子组件的方法
时间: 2023-10-23 16:36:16 浏览: 259
在uni-app中,父组件可以调用子组件的方法。首先,确保已经在父组件中引入了子组件。然后,可以通过`ref`属性给子组件添加一个引用,然后通过这个引用来调用子组件的方法。
下面是一个示例:
在父组件中:
```html
<template>
<div>
<child ref="childRef"></child>
<button @click="callChildMethod">调用子组件方法</button>
</div>
</template>
<script>
import child from '@/components/child.vue';
export default {
components: {
child,
},
methods: {
callChildMethod() {
this.$refs.childRef.childMethod(); // 调用子组件的方法
},
},
};
</script>
```
在子组件中(child.vue):
```html
<template>
<div>
子组件内容
</div>
</template>
<script>
export default {
methods: {
childMethod() {
console.log('子组件方法被调用');
},
},
};
</script>
```
在父组件中,使用`ref`给子组件添加一个引用,然后通过`this.$refs.childRef`来获取子组件的实例,进而调用子组件的方法。
注意:使用`ref`引用子组件时,需要确保子组件已经被渲染到父组件中。
阅读全文