Это старая версия документа!

Вопрос / Ответ

Q: Как вызвать метод из дочернего компонента?

Q: Как вызвать метод из родительского компонента?

Через ссылки $refs

import ChildForm from './components/ChildForm'
 
new Vue({
  el: '#app',
  data: {
    item: {}
  },
  template: `
  <div>
     <ChildForm :item="item" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.$refs.form.submit()
    }
  },
  components: { ChildForm },
}
<template>
 ...
</template>
 
<script>
export default {
  name: 'NowForm',
  props: ['item'],
  methods: {
    submit() {
        ...
    }
  }
}
</script>

Через системный вызов $bus

import ChildForm from './components/ChildForm'
 
new Vue({
  el: '#app',
  data: {
    item: {},
    bus: new Vue(),
  },
  template: `
  <div>
     <ChildForm :item="item" :bus="bus" ref="form" />
     <button type="submit" @click.prevent="submit">Post</button>
  </div>
  `,
  methods: {
    submit() {
      this.bus.$emit('submit')
    }
  },
  components: { ChildForm },
})
<template>
 ...
</template>
 
<script>
export default {
  name: 'NowForm',
  props: ['item', 'bus'],
  methods: {
    submit() {
        ...
    }
  },
  mounted() {
    this.bus.$on('submit', this.submit)
  },  
}
</script>