Vue.js如何公开组件数据属性以用于第三方脚本？
问题描述：
我想知道什么最干净的方式暴露单个文件Vue组件上的数据属性，而不会污染全局命名空间。Vue.js如何公开组件数据属性以用于第三方脚本？
在我的主项文件（app.js）为Vue的我设立的Vue像这样：
import components from './components/components';
window.app = new Vue({
el: '#vue',
store,
// etc.
});
我components.js进口的一切，我想为HTML片段使用的组件。其中一些组件是自己的导入组件，它们不会直接设置为我的root实例上的组件。
公开某些单个文件Vue组件的某些数据属性的最佳方法是什么？
比如我有一个Search.vue成分，我想从结果数组谷歌分析发送我的第3个对象：
// Expose this on `Search.vue`:
data: {
// Filled with data from ajax request.
results: []
}
我Vue的实例可用全球。有没有一种简单的方法来访问某个组件，或许是通过名称或其他？
编辑
迄今为止最好的选择目前看起来像通过一个getter访问我的财产（我有可用我的店里面）像这样：
this.$store.getters.propertyINeed
，关于如何提高任何建议在此欢迎。
答
我建议您在Vuex商店中存储您需要的数据。正如你所看到的，srch-component有一个计算结果属性给出了结果，并且有一个观察者会自动将数据发送到商店。然后，您可以使用类似app.$store的内容访问数据而不篡改组件。
请注意，您还可以使用模块更好地管理商店（link）。
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', '*lyn 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>
我看你使用的商店，我假设你正在使用'Vuex'，你可以把数据在Vuex店呢？ – kevguy
然后只需使用'app。$ store'并在此对象上调用getters属性即可访问它？ –
这是做到这一点的一种方式，但我认为如果可以的话，您应该在商店内部做（我正在为其编写一个解决方案）。 – kevguy