無法在其元素之外調用 Vue 組件方法

Question

我有一個簡單的 vue 組件，其中包含一種方法，我試圖在它的包裝元素 #app 之外調用它，但它沒有觸發。 有沒有辦法重新注冊視圖組件，以便我可以使用 Component.function(); 調用它？

var viewModel = new Vue({
  el: "#app",
  data: {},
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

HTML：

<div id="app">

</div>

<a @click="viewModel.test()">Click me!</a>

小提琴： https : //jsfiddle.net/queeeeenz/Lja7pake/198/

Answer 1

我測試了一段時間。

1. 它可能無法在 Vue 元素之外的元素中使用@
2. var viewModel似乎沒有附加到 window 對象

不過我可以用這個跑步

JS

window.viewModel = new Vue({
  el: "#app",
  data: {},
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

HTML

<div id="app">

</div>

<a onClick="viewModel.test()">Click me!</a>

Answer 2

首先，您似乎以“Vue”的方式附加了一個點擊處理程序，而實際上它並不是一個 Vue 組件。 那是行不通的。

為了嚴格實現你想要的，你必須將你的函數暴露給不同的范圍，例如通過將它分配給一個 window 屬性。

var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    // Now it is exposed
    window.test = this.test;
  },
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});

// And later
window.test();

這樣做的更好方法可能是使用全局事件總線。 您可以創建一個您公開的總線，而不是在全局范圍內公開隨機函數。 這樣做的好處是，如果一切都發生在 Vue 應用程序中，您可以在 Vue 應用程序的任何地方使用this.$bus.$emit('...')並在 Vue 應用程序的其他任何地方收聽它。 如果在 Vue 應用程序之外使用它的好處是，您可以在 Vue 應用程序內部和 Vue 應用程序外部之間使用 set 接口，從而防止您不得不在全局范圍內暴露越來越多的函數，並允許你要弄清楚在 Vue 應用程序之外什么可以做，什么不能做。

import Vue from 'vue';
export const bus = new Vue();

// Elsewhere
import { bus } from './bus';
Vue.prototype.$bus = bus;

// In outside code
import { bus } from '../../my-vue-application/bus';
bus.$emit('test');

// In your component
var viewModel = new Vue({
  el: "#app",
  data: {},
  created () {
    this.$bus.$on('test', this.test);
  },
  beforeDestroy () {
    this.$bus.$off('test', this.test);
  },
  methods: {
    test: function() {
      alert("test fuction called");
    }
  }
});