Vue.js: 从"parent" 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)") 的函数，但仅（逻辑上）returns 来自 childVue 而不是来自 indexVue.[=20= 的数据属性]

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

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

另外我这里不允许使用jQuery，这会成为秒杀任务。

Answer 1

我建议使用 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)
    }
  }
};

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

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

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

Vue.js: 从"parent" Vue获取数据

Vue.js: Get data from "parent" Vue

javascript

dom

vue.js