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 ...
    },
    ...
  }
});

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

谷歌并没有真正帮助，因为Vue没有充分记录。

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

此外，我不允许在这里使用jQuery，这将使其成为秒的任务。

Answer 1

Pantelis的答案不再适用。 Vue.js删除了继承属性。

最好的方法是pass data through properties;

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

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

请注意childVue.js中的on adding folder items to this_folder属性和用于属性名称的案例（camelCase vs kebab-case）

Answer 2

您也可以通过此访问它。$ parent.someData，以防您无法将其绑定在prop :)上，例如：

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

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

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

3 个答案: