Различия

Показаны различия между двумя версиями страницы.

Ссылка на это сравнение

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
js:vuejs:faq [2018/06/09 16:40] – mirocowjs:vuejs:faq [2018/06/09 20:05] (текущий) – mirocow
Строка 1: Строка 1:
 ====== Вопрос / Ответ ====== ====== Вопрос / Ответ ======
  
-===== Q: Как вызвать метод из дочернего компонента? ===== +  * [[js:vuejs:faq:call-methods-from-components]]
- +
- +
-===== Q: Как вызвать метод из родительского компонента? ===== +
- +
-==== Через ссылки $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> +
- +
-<script> +
-export default { +
-  name: 'NowForm', +
-  props: ['item'], +
-  methods: { +
-    submit() { +
-        ... +
-    } +
-  } +
-} +
-</script> +
-</code> +
- +
-==== Через системный вызов $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> +
- +
-<code html> +
-<template> +
- ... +
-</template> +
- +
-<script> +
-export default { +
-  name: 'NowForm', +
-  props: ['item', 'bus'], +
-  methods: { +
-    submit() { +
-        ... +
-    } +
-  }, +
-  mounted() { +
-    this.bus.$on('submit', this.submit) +
-  },   +
-} +
-</script> +
-</code> +