Различия

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

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

Следующая версия		 Предыдущая версия
js:vuejs:faq:call-methods-from-components [2018/06/09 20:05] – создано mirocowjs:vuejs:faq:call-methods-from-components [2018/06/09 20:48] (текущий) – [Через ссылки $refs] mirocow
Строка 74: Строка 74:
  
 <code javascript> <code javascript>
-const EventBus = new Vue();+const $events = new Vue();
  
 new Vue({ new Vue({
     name: 'app-example',     name: 'app-example',
     created() {     created() {
-      EventBus.$emit('firstClick');+      $events.$emit('firstClick');
     }       }  
 }); });
Строка 91: Строка 91:
     },       },  
     created() {     created() {
-        EventBus.$on('firstClick', parent => {+        $events.$on('firstClick', parent => {
             this.onFirstClick();             this.onFirstClick();
         });         });
Строка 105: Строка 105:
      
 Если не нужны параметры, можно parent заменить на () <code javascript> Если не нужны параметры, можно parent заменить на () <code javascript>
-        EventBus.$on('firstClick', () => {+        $events.$on('firstClick', () => {
             this.onFirstClick();             this.onFirstClick();
         });         });
Строка 222: Строка 222:
 </code> </code>
  
 +=== Внешний вызов через $refs ===
 +
 +<code html>
 +<div id="app">
 +<h1>Component Test</h1>
 +<my-component ref="foo"></my-component>
 +</div>
 +
 +<button id="externalButton">External Button</button>
 +</code>
 +
 +<code javascript>
 +var MyComponent = Vue.extend({
 +  template: '<div><p>Hello</p><ul><li v-for="thing in things">{{ thing }}</li></ul></div>',
 +  data: function() {
 +    return {
 +      things: ['first thing']
 +    };
 +  },
 +  methods: {
 +  addThing: function() {
 +    this.things.push('another thing ' + this.things.length);
 +    }
 +  }
 +});
 +
 +var vm = new Vue({
 +  el: '#app',
 +  components: {
 +  'my-component': MyComponent
 +  }
 +});
 +
 +document.getElementById("externalButton").onclick = function () {
 +  vm.$refs.foo.addThing();
 +};
 +</code>
 ==== Через системный вызов $bus ==== ==== Через системный вызов $bus ====