vue3父组件调用孙子组件方法
时间: 2023-11-08 07:59:58 浏览: 244
父组件可以通过子组件的引用(`ref`)来调用孙子组件的方法。在Vue3中,可以使用`$refs`属性来直接访问子组件的方法。首先,在子组件中添加一个`ref`属性,然后在父组件的方法中使用`$refs`来调用孙子组件的方法。下面是示例代码:
父组件:
```html
<template>
<div>
<Button @click="handleClick">点击调用孙子组件方法</Button>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
handleClick() {
this.$refs.child.$refs.grandson.test(); // 调用孙子组件的方法
},
},
}
</script>
```
子组件:
```html
<template>
<div>
我是子组件
<Grandson ref="grandson"></Grandson>
</div>
</template>
<script>
import Grandson from './grandson';
export default {
components: {
Grandson
},
}
</script>
```
孙子组件:
```html
<template>
<div></div>
</template>
<script>
export default {
name: "index",
methods:{
test(){
console.log('孙子组件的方法');
}
}
}
</script>
```
阅读全文