vue父组件调用动态子组件方法
时间: 2023-11-03 10:03:25 浏览: 91
父组件可以通过以下方法调用动态子组件的方法:
1. 在父组件中给子组件定义ref,例如:<子组件 @sendMsg="process" ref="child"></子组件>
2. 在父组件的methods中调用子组件方法,使用this.$refs.child.methodName(params)的方式,例如:this.$refs.child.printAge(12)
下面是一个示例代码演示了父组件调用子组件的方法动态传参:
父组件中:
```
export default {
methods: {
invokeChildMethod() {
this.$refs.child.printAge(12);
}
}
}
```
子组件中:
```
export default {
methods: {
printAge(age) {
console.log(age);
}
}
}
```
阅读全文
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)