Hot For Coding
Vue如何直接调用Component里的方法

有时候,我们需要在另一个A Component里直接调用B Component里的方法,但Vue的Component和我们平常写的JavaScript module不一样,不能简单的通过import后就直接调用,下面是我找到的一种方法,目前测试可用

AComponent.vue

<template>
  <div>
    <b-component ref="BComponent"></b-component>
  </div>
</template>
 
<script>
import BComponent from './BComponent'
 
export default {
  name: 'A',
 
  data () {
  },
 
  components: {
    BComponent
  },
 
  methods: {
    callACompoentFunction () {
      this.$refs.BComponent.sayHi()
    }
  }
}
</script>
 
<style scoped>
</style>

BComponent.vue

<template>
  <div></div>
</template>
 
<script>
 
export default {
  name: 'B',
 
  data () {
  },
 
  methods: {
    sayHi () {
      console.log('Hello world!')
    }
  }
}
</script>
 
<style scoped>
</style>

思路就是:

  • import 进来
  • componets 属性里添加
  • 页面上添加被引进来的component标签,并添加ref属性
  • 通过this.$refs找到引入的BComponent,后面直接加方法名就好,默认所有方法都可以访问到

TITLE: Vue如何直接调用Component里的方法

LINK: https://www.qttc.net/491_vue_call_component_fun.html

NOTE: 转载内容请注明出处