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

JavaScript 2017-12-25 Vue,Component

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

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

<template>
  <div></div>
</template>

<script>

export default {
  name: 'B',

  data () {
  },

  methods: {
    sayHi () {
      console.log('Hello world!')
    }
  }
}
</script>

<style scoped>
</style>

思路就是:

1、important进来

2、componets属性里添加

3、页面上添加被引进来的component标签,并添加ref属性

4、通过this.$refs找到引入的Child Component,后面直接加方法名就好,默认所有方法都可以访问到

文字链接:《如何直接调用Vue Component里的方法?

文章地址:http://www.qttc.net/201712491.html

除非标注,琼台博客所有博文均为原创,转载请加文字链接注明来源

乳名?小名?昵称?网名?均可

email,放心,我不会给你乱投广告的

想获得回访就把你的站点URL写上(没有留空)

[NOTICE]木要投放广告
[NOTICE]木要骂人,说不该说的话
[NOTICE]自由言论,但要遵纪守法

Comments 0

    Hi,你想第一个做沙发么?