18.从组件外部调用一个方法

Posted 2022-09-14 @大迁世界

这节课，我们来看一下如何从组件外部调用组件内的方法。

我们来看个例子，假设，我们有一个 Child 组件:

// Child.vue
<template>
  <div>
    child 组件
  </div>
</template>

<script>
export default 
  methods: 
    childMethod () 
      console.log(\'调用了 child 组件方法\')
    
  

</script>

如果我们想父组中调用 Child 的 childMethod方法，该怎么做呢？恩，我们一般使用 ref 方式，如下所示：

<template>
  <div>
    <Child ref="child" />
  </div>
</template>

<script>
import Child from \'./components/Child.vue\'

export default 
  components: 
    Child
  ,
  mounted () 
    this.$refs.child.childMethod()
  

</script>

这里，我们使用 ref 获取到对应的 Child 实例，当组件挂载时，我们通过 this.$refs.child.childMethod() 调用了 Child 组件内的