Различия

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

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

Предыдущая версия справа и слева Предыдущая версия
js:vuejs:faq:call-methods-from-components [2018/06/09 20:08] – [Вызов через глобальный компонент EventBus] mirocowjs:vuejs:faq:call-methods-from-components [2018/06/09 20:48] (текущий) – [Через ссылки $refs] mirocow
Строка 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 ====