Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
Следующая версия		 Предыдущая версия
js:vuejs:faq [2018/06/09 19:07] – [Вызов через внешний компонент EventBus] 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: Как вызвать метод из дочернего компонента? ==== +
- +
-=== Вызов через глобальный компонент EventBus === +
- +
-<code javascript> +
-const EventBus = new Vue(); +
- +
-new Vue({ +
-  name: 'app-example', +
-    created() { +
-      EventBus.$emit('firstClick'); +
-    }   +
-}); +
-</code> +
- +
-<code javascript> +
-const = childComponent = { +
-    methods: { +
-        onFirstClick() { +
-        }, +
-    },   +
-    created() { +
-        EventBus.$on('firstClick', parent => { +
-            this.onFirstClick(); +
-        }); +
-    }, +
-}; +
-</code> +
- +
-<code html> +
-<div id="app-example"> +
- <child-component></child-component> +
-</div +
-</code> +
-   +
-Если не нужны параметры, можно parent заменить на () <code javascript> +
-        EventBus.$on('firstClick', () => { +
-            this.onFirstClick(); +
-        }); +
-</code> +
- +
-=== Вызов через внутренний компонент EventBus === +
- +
-<code javascript> +
-var bus = new Vue({}) +
- +
-Object.defineProperty(Vue.prototype, '$bus', { +
-    get(){ +
-        return this.$root.bus; +
-    }, +
-    set(newInstance){ +
-        this.$root.bus = newInstance; +
-    }, +
-}); +
- +
-new Vue({ +
-  name: 'app-example', +
-    created() { +
-      this.$bus.$emit('firstClick'); +
-    }   +
-}); +
-</code> +
- +
-<code javascript> +
-const = childComponent = { +
-    methods: { +
-        onFirstClick() { +
-        }, +
-    },   +
-    created() { +
-        this.$bus.$on('firstClick', parent => { +
-            this.onFirstClick(); +
-        }); +
-    }, +
-}; +
-</code> +
- +
-<code html> +
-<div id="app-example"> +
- <child-component></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> +