Vue.js如何公开组件数据属性以便在第三方脚本中使用？

Question

我想知道在不污染全局命名空间的情况下，在单文件Vue组件上公开数据属性的最简洁方法是什么。

在Vue的主条目文件（app.js）中，我正在设置Vue：

import components from './components/components';

window.app = new Vue({
    el: '#vue',

    store,

    // etc.
});

我的components.js导入了我想用作HTML片段的所有组件。 其中一些组件是自己的导入组件，它们不直接设置为我的root实例上的组件。

公开某些单文件Vue组件的某些数据属性的最佳方法是什么？

例如，我有一个Search.vue组件，我想将我的前三个对象从一系列结果发送到Google Analytics：

// Expose this on `Search.vue`:

data: {
    // Filled with data from ajax request.
    results: []
}

我的Vue实例在全球范围内可用。 是否有一种简单的方法可以通过名称或其他方式访问某个组件？

编辑

到目前为止，最好的选择目前看起来像通过一个getter访问我的属性（我在我的商店里面可用）：

this.$store.getters.propertyINeed

有关如何改进的任何建议都是受欢迎的。

Answer 1

我建议您将所需数据存储在Vuex商店中。 正如您所看到的， srch-component具有计算属性，该属性提供结果，并且有一个观察器将自动将数据分派到商店。 然后你可以使用像app.$store这样的东西来访问数据而不会篡改组件。

请注意，您还可以使用模块（ 链接 ）更好地管理商店。

 Vue.use(Vuex) const store = new Vuex.Store({ state: { topSrchResult: [] }, mutations: { updateTopSrchResult: (state, payload) => { state.topSrchResult = payload } }, actions: { UPDATE_TOP_SRCH_RESULT: ({ commit }, data) => { commit('updateTopSrchResult', data) } } }) Vue.component('srch-component', { template: ` <div> <div>Input: <input v-model="inputVal" type="text"/></div> <div>Search Results:</div> <ul> <li v-for="item in srchResult">{{item}}</li> </ul> </div> `, data() { return { inputVal: '', dummyData: [ 'Scrubs', 'Hannah Montana', '30 Rock', 'Wizards of Waverly Place', 'How I Met Your Mother', 'Community', 'South Park', 'Parks and Recreation', 'The Office', 'Brooklyn Nine-Nine', 'Simpsons', 'Fringe', 'Chuck' ] } }, watch: { srchResult() { const payload = this.srchResult.length <= 3 ? this.srchResult : this.srchResult.slice(0,3) this.$store.dispatch('UPDATE_TOP_SRCH_RESULT', payload) } }, computed: { srchResult() { return this.dummyData .filter( (item) => item.toLowerCase().includes(this.inputVal.toLowerCase()) ) } } }) const app = new Vue({ el: '#app', computed: { topSrchResult() { return this.$store.state.topSrchResult } }, store }) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.4.1/vuex.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script> <div id="app"> <div>Top Results</div> <ul> <li v-for="item in topSrchResult">{{item}}</li> </ul> <srch-component></srch-component> </div>