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

Вы загрузили старую версию документа! Сохранив её, вы создадите новую текущую версию с этим содержимым.

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

====== Вызовы компонентов ======

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

<code javascript>
const = childComponent = {
  data: function () {
     return {
       childData: ''
     }
  },
  props: {
     parentData: {
       type: String,
       default () {
         return ''
       }
     }
  },
  methods: {
     // maybe onchagne may onclick whatever..
     handleDataFc: function () {
       this.$emit('interface', this.childData) // handle data and give it back to parent by interface
     }
  },
  beforeMount () {
     this.childData = this.parentData // save props data to itself's data and deal with it
  }
};
</code>

<code html>
<div id="counter-event-example">
 <child-component
   :parentData="parentData"
   @interface="handleFcAfterDateBack">
 </child-component>
 <child-component
   :parentData="parentData"
   @interface="parentData = $event">
 </child-component>
</div
</code>
==== Q: Как вызвать метод из родительского компонента? ====

=== С помощью %emit ===

<code javascript>
const childComponent = {
  name: 'child-component',
  methods: {
      something() { this.$emit('event', [x: y]);
  }
});
</code>
  
<code html>
<child-component @event="handler"></child-component>
</code>

<code javascript>
new Vue({
  methods: {
      handler(params) {
          console.log(params);
      }
  }
});
</code>

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

<code javascript>
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 },
});
</code>
        
<code html>
<template>
 ...
</template>

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

<code javascript>
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 },
});
</code>

Сводка изменений

Примечание: редактируя эту страницу, вы соглашаетесь на использование своего вклада на условиях следующей лицензии: CC0 1.0 Universal