vue 如何调用子组件内的方法

在Vue中，子组件的方法可以通过父组件的该子组件的引用来调用。

1. 在父组件中，给子组件添加一个ref属性，用来获取子组件的引用。例如：

<template>
  <div>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildComponentMethod() {
      this.$refs.child.childMethod();
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

2. 在子组件中，定义需要被调用的方法。例如：

<template>
  <div>
    <button @click="childMethod">调用子组件方法</button>
  </div>
</template>

<script>
export default {
  methods: {
    childMethod() {
      console.log("子组件方法被调用");
      // 这里是子组件方法的逻辑
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在父组件的方法callChildComponentMethod中，通过this.$refs.child获取到子组件的引用，然后使用.childMethod()来调用子组件的方法。

this.$refs.child.childMethod();
1

需要注意的是，子组件的方法只能在子组件被创建并挂载到DOM之后才能被调用。所以在父组件中调用子组件的方法时，需要保证子组件已经被创建并且已经挂载到DOM中。