Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
js:vuejs:faq [2018/06/09 20:02] – [С помощью %emit] 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: Как вызвать метод из дочернего компонента? ==== +
- +
-=== Вызов чере $props === +
- +
-== ребенок == +
- +
-<code javascript> +
-const Mouse = { +
-    name: "Mouse", +
-    props: { +
-      render: { +
-        type: Function, +
-        required: true +
-      } +
-    }, +
-    data() { +
-      return { +
-        x: 0, +
-        y: 0 +
-      }; +
-    }, +
-    methods: { +
-      handleMouseMove(event) { +
-        this.x = event.clientX; +
-        this.y = event.clientY; +
-      } +
-    }, +
-    render(h) { +
-      return ( +
-        <div style={{ height: "100%" }} onMousemove={this.handleMouseMove}> +
-          {this.$props.render(this)} +
-        </div> +
-      ); +
-    } +
-}; +
-</code> +
- +
-== родитель == +
- +
-<code javascript> +
-new Vue({ +
-    el: '#app', +
-    name 'app', +
-    components: { +
-      Mouse +
-    }, +
-    methods: { +
-      __render({ x, y }) { +
-        return ( +
-          <h1> +
-            The mouse position is ({x}, {y}) +
-          </h1> +
-        ); +
-      } +
-    },   +
-    created() { +
-    }   +
-}); +
-</code> +
- +
-<code html> +
-  <div id="app"> +
-    <Mouse :render="__render"/> +
-  </div> +
-</code> +
- +
-=== Вызов через глобальный компонент 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', (event) => { +
-            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> +