Как заставить onclick = "vm. $ Refs.foo.addThing ()" работать в Vue при вызове из внешнего JS?

Question

Я пытаюсь получить мой код, похожий на этот jsFiddle , работающий.

Код в основном имеет onclick="vm.$refs.foo.addThing()" вне экземпляра Vue (я не мог изменить так, как он есть), который вызывает функцию в methods.

Vue.

Однако сейчас это не работает, и я не понимаю, почему это так.

HomeView.vue

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
  }
});

HTML

<div id="app">
<h1>Component Test</h1>
<my-component ref="foo"></my-component>
</div>

<button onclick="vm.$refs.foo.addThing()">External Button</button>

Answer 1

Вы можете получить доступ к $refs до обработки шаблона (отметьте docs ).

Пожалуйста, обратите внимание на исправленный код: https://jsfiddle.net/b5oset1w/17/

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
  },
  mounted: function() {
    console.log(this.$refs)
  },
  methods: {
    onAddThing: function() {
      this.$refs.foo.addThing()
    }
  }
});

Шаблон:

<div id="app">
  <h1>Component Test</h1>
  <my-component ref="foo"></my-component>

  <button @click="onAddThing">External Button</button>

</div>

Answer 2

другой подход для достижения этой цели - создание экземпляра vue для внешней кнопки. как ниже пример кода.

    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: {
            MyComponent: MyComponent
        }
    });

        var vm1 = new Vue({
        el: '#newapp',
        methods:{
        	clickAction:function(){
        		vm.$refs.foo.addThing();
        	}
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
<h1>Component Test</h1>
<my-component ref="foo"></my-component>
</div>

<div id="newapp">
   <button @click="clickAction">External Button</button>
</div>

Answer 3

Вы можете предоставить этот метод объекту window, но это считается анти-паттерном, и вам, вероятно, следует рассмотреть возможность перемещения этой кнопки внутри компонента.

Или используйте хак:

const 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);
    }
  }
});

const vm = new Vue({
  el: '#app',

  mounted() {
    var btn = document.getElementById('btn-external');

    btn.addEventListener('click', this.$refs.foo.addThing);
  },

  components: {
    'my-component': MyComponent
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <h1>Component Test</h1>
  <my-component ref="foo"></my-component>
</div>

<button id="btn-external">External Button</button>