在vue2中,有一个是通过npm安装的子组件,如何在子组件加载完毕后调用某个方法
时间: 2024-02-20 13:02:20 浏览: 145
在 Vue 2.x 中,可以通过监听子组件的 `mounted` 钩子函数来判断子组件是否加载完成。如果你安装的子组件是通过 npm 安装的,那么在父组件中引入子组件时需要使用 `import` 语句。
1. 在父组件中引入子组件并注册:
```javascript
<template>
<div>
<my-component ref="myComponentRef" />
</div>
</template>
<script>
import MyComponent from 'my-component';
export default {
components: {
MyComponent
},
methods: {
onChildMounted() {
console.log('子组件加载完成');
// 在这里可以进行后续操作
this.$refs.myComponentRef.doSomething();
}
}
};
</script>
```
2. 在子组件中触发 `mounted` 钩子函数:
```javascript
<script>
export default {
mounted() {
this.$emit('mounted');
},
methods: {
doSomething() {
console.log('子组件方法被调用');
}
}
};
</script>
```
这样就可以在父组件中监听到子组件的 `mounted` 事件,并调用子组件的方法了。需要注意的是,在父组件中通过 `$refs` 访问子组件的方法需要等子组件加载完成后才能进行访问。
阅读全文