Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
js:vuejs:faq [2018/06/09 17:13] – [Q: Как вызвать метод из дочернего компонента?] mirocowjs:vuejs:faq [2018/06/09 20:05] (текущий) – mirocow
Строка 1: Строка 1:
 ====== Вопрос / Ответ ====== ====== Вопрос / Ответ ======
  
-====== Вызовы компонентов ====== +  * [[js:vuejs:faq:call-methods-from-components]]
- +
-{{:js:vuejs:0_xzkw0-t4uea3d5yh.png?400|}} +
- +
-==== Q: Как вызвать метод из дочернего компонента? ==== +
- +
-<code javascript> +
-new Vue({ +
-  data () { +
-   parentData: 'init data' +
-  }, +
-  method () { +
-   handleFcAfterDateBack (event) { +
-     console.log('data after child handle: ', event) // get the data after child dealing +
-   } +
-  } +
-}); +
-</code> +
- +
-<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> +
- +
-<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> +