Vue.js：从 parent父Vue 获取数据

发布于08月30日

我有一个(不可更改的)DOM struct ，如下所示:

<div id="indexVue">
  ...
  <div id="childVue">
  ...
  </div>
  ...
</div>

和两个js文件:

指数js:

var child = require('childVue');

module.exports = new Vue({
  el: '#indexVue',
  ...
});

childVue.js:

module.exports = new Vue({
  el: '#childVue',
  methods: {
    something: function(){
      // Parent data needed here ...
    },
    ...
  }
});

如图所示，我需要childVue中indexVue的数据.有没有办法把它传给它？我试图将其传递给一个(v-on="click: childFunction($data)")的函数，但它只(逻辑上)从childVue返回数据属性，而不是从indexVue返回数据属性.

谷歌并没有真正起到帮助作用，因为Vue没有很好的文档记录.

真正的文件和DOM struct 更大、更复杂，但我的问题只需要这些文件.

此外，我不允许在这里使用jQuery，这将使它成为一项耗时数秒的任务.

推荐答案

潘泰利斯的回答不再正确.Vue.js删除了inherit属性.

最好的办法是pass data through properties;美元

<div id="indexVue">
  <child-vue :some-data="someData"></child-vue>
</div>

指数js:

module.exports = new Vue({
  el: '#indexVue',
  data: {
    someData: "parent's data"
  },
  components: {
    childVue: require('childVue')
  }
});

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

请注意childVue.js中的props属性和用于属性名称的大小写(camelCase vs kebab-case)