vue里，怎样提供数据给所有的子组件？

[霍流根]

vue根组件下有多个子组件，根组件该采用什么样的方式提供数据给这些子组件呢？

[cn00439805]

// 父级组件提供 'foo'
var Provider = {
  provide: {
    foo: 'bar'
  },
  // ...
}

// 子组件注入 'foo'
var Child = {
  inject: ['foo'],
  created () {
    console.log(this.foo) // => "bar"
  }
  // ...
}

[NANU-NANA]

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

[霍流根]

引用 2 楼 NANU-NANA 的回复:

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

多个子组件的数据是独立的，它们如果共享同一个根实例下的数据会有问题

[風灬雲]

多个地方使用，最简单的 vux,状态管理，全局都能取