Vue.js：从“父”Vue 获取数据

Question

我有一个（不可更改的）DOM 结构，如下所示：

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

还有两个js文件：

index.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 的数据属性。

Google 并没有真正提供帮助，因为 Vue 没有很好的文档记录。

真正的文件和 DOM 结构更大更复杂，但我的问题需要的只是这些文件。

我也不允许在这里使用 jQuery，这将使它成为几秒钟的任务。

Answer 1

你也可以通过 this.$parent.someData 访问它，以防你无法将它绑定到一个道具上:) 例如：

data() {
 return {
  parentData: this.$parent.someData
 }
}

Answer 2

Pantelis 的回答不再正确。 Vue.js 移除了继承属性。

最好的方法是pass data through properties;

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

index.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)

Answer 3

我建议使用child component 到inherit 的父级范围。

index.html

<div id="indexVue">
  <child-vue></child-vue>
</div>

index.js：

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

childVue.js：

module.exports = {
  inherit: true,
  template: '<div>...</div>',
  methods: {
    something: function(){
      // you can access the parent's data
      console.log(this.someData)
    }
  }
};