vue2.0 父组件调用子组件方法及获取子组件的值
时间: 2024-03-26 15:33:42 浏览: 127
Vue2.0父组件与子组件之间的事件发射与接收实例代码
在Vue 2.0中,父组件可以通过使用`ref`属性来获取子组件的实例,并且可以通过该实例调用子组件的方法和获取子组件的值。
首先,在父组件中给子组件添加一个`ref`属性,例如:
```html
<template>
<div>
<child-component ref="child"></child-component>
</div>
</template>
```
然后,在父组件的JavaScript代码中,可以通过`this.$refs`来访问子组件的实例,从而调用子组件的方法和获取子组件的值。例如:
```javascript
<script>
export default {
mounted() {
// 调用子组件的方法
this.$refs.child.childMethod();
// 获取子组件的值
const childValue = this.$refs.child.childValue;
console.log(childValue);
}
}
</script>
```
需要注意的是,父组件只能在子组件被挂载后才能访问到子组件的实例,所以在父组件的生命周期钩子函数`mounted`中进行操作是比较安全的。
阅读全文