Javascript Vue.js：从“父”Vue 获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32481580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vue.js: Get data from "parent" Vue
提问by Nico S?nger
I have an (unchangeable) DOM structure as followed:
我有一个（不可更改的）DOM 结构如下：
<div id="indexVue">
...
<div id="childVue">
...
</div>
...
</div>
And two js files:
还有两个js文件：
index.js:
索引.js：
var child = require('childVue');
module.exports = new Vue({
el: '#indexVue',
...
});
childVue.js:
childVue.js：
module.exports = new Vue({
el: '#childVue',
methods: {
something: function(){
// Parent data needed here ...
},
...
}
});
As shown, I need the data of the indexVuein childVue. Is there any way to pass it to it? I tried to pass it to a function with (v-on="click: childFunction($data)"), but that only (logically) returns the data attribute from the childVueand not from the indexVue.
如图所示，我需要indexVuein的数据childVue。有什么办法可以传递给它吗？我试图将它传递给一个带有 的函数(v-on="click: childFunction($data)")，但这只是（逻辑上）从 返回数据属性，childVue而不是从indexVue.
Google does not really help, as Vue is not well-documented.
谷歌并没有真正的帮助，因为 Vue 没有很好的文档记录。
The real file and DOM structure are way bigger and more complicated, but necessary for my problem are only these files.
真正的文件和 DOM 结构更大更复杂，但我的问题只需要这些文件。
Also I am not allowed to use jQuery here, which would make it a task of seconds.
此外，我不允许在这里使用 jQuery，这将使其成为一项任务。
回答by Soufiane Ghzal
The answer from Pantelis is not true anymore. Vue.js removed the inherit property.
潘泰利斯的回答不再正确。Vue.js 删除了继承属性。
The best way to do that is to pass data through properties;
最好的方法是通过属性传递数据；
<div id="indexVue">
<child-vue :some-data="someData"></child-vue>
</div>
index.js:
索引.js：
module.exports = new Vue({
el: '#indexVue',
data: {
someData: "parent's data"
},
components: {
childVue: require('childVue')
}
});
childVue.js:
childVue.js：
module.exports = {
template: '<div>{{someData}}</div>',
methods: {
something: function(){
// you can access the parent's data
console.log(this.someData)
}
},
props: ['some-data'] // kebab case here available as camelcase in template
};
Please note the propsproperty in childVue.jsand the case (camelCase vs kebab-case) used for the property name
请注意props属性childVue.js和用于属性名称的案例（camelCase vs kebab-case）
回答by TITO
You could also access it by this.$parent.someData in case you cannot bind it on a prop :) for example:
您也可以通过 this.$parent.someData 访问它，以防您无法将其绑定到 prop :) 例如：
data() {
return {
parentData: this.$parent.someData
}
}
回答by Pantelis Peslis
I suggest to use a child componentto inheritthe scope of its parent.
我建议使用 achild component来继承其父级的范围。
index.html
索引.html
<div id="indexVue">
<child-vue></child-vue>
</div>
index.js:
索引.js：
module.exports = new Vue({
el: '#indexVue',
data: {
someData: "parent's data"
},
components: {
childVue: require('childVue')
}
});
childVue.js:
childVue.js：
module.exports = {
inherit: true,
template: '<div>...</div>',
methods: {
something: function(){
// you can access the parent's data
console.log(this.someData)
}
}
};
