Question

这是我的代码，我没有使用webpack，而只是使用vuejs cdn。我想将regionComponent中的districts的值获取到districtComponent中的另一个变量并显示它。

const regionsComponent = Vue.component('region-component', {
  template: `
    <div class="col-lg-6">
      <div class="form-group" >
        <label  class="label-text" for="officeRegion">Region</label> <span class="red">*</span>
        <select class="form-control" id="officeRegion" 
        name="officeRegion"  :value = "value" v-on:input ="updateRegion($event.target.value)">
          <option value='' >Select region</option>
          <option v-for="region in regions" :value="region.regionId">{{region.region}}</option>
        </select>
      </div>
    </div>`,

  data() {
    return {
      regions:[],
    }
  },
  created(){
    this.getRegions();
  },
  props:['value','districts'],
  methods: {  
    getRegions: function() {
      let apiurl = document.getElementById("apiurl").value;
      let apikey = document.getElementById("apikey").value;
      let headers =  {
        'Content-Type': 'application/json',
        'apiKey': apikey
      }
      axios.get(apiurl+'regions/all', {headers: headers})
        .then((res)=>{
        console.log(res.data.data[0].region)
        if(res.data.responseCode === "01"){
          this.regions = res.data.data;
        } else {
          console.log("failed to load regions")
        }
      })
    },
    updateRegion: function(value){
      this.$emit('input', value);
      // console.log(value)
      if(value){
        thisdistricts = this.getRegionDistrict(value)
      }
    },
    getRegionDistrict: function (regionId){
      let apiurl = document.getElementById("apiurl").value;
      let apikey = document.getElementById("apikey").value;
      let headers =  {
        'Content-Type': 'application/json',
        'apiKey': apikey
      }
      axios.get(apiurl+'region/districts/all?regionId='+ regionId, {headers: headers})
        .then((res)=>{
        console.log(res.data)
        if(res.data.responseCode==="01"){
          return  this.districts = res.data.data
          // console.log(this.districts)
        }
      })
    }  
  }
})

const districtComponent = Vue.component('district-component', {
  template:`
    <div class="col-lg-6">
      <div class="form-group">
        <label  class="label-text" for="officeDistrict">District</label> <span class="red">*</span>
        <select class="form-control" id="officeRegion" name="officeRegion" v-bind="district" v-on:input= "updateDisct($event.target.value)">
          <option value='' >Select district</option>
          <option v-for="district in districts" :value="district.districtId">{{district.districtName}}</option>
        </select>
      </div>
    </div>`,

  props:['district'],
  data() {
    return {
      districts:[],
    }
  },
  methods: {
    updateDisct: function(district){
      this.$emit('input', district);
      console.log(district)  
    }
  }
})

var app = new Vue({
  el: '#myForm',
  components: {
    vuejsDatepicker,
    regionsComponent,
  },
  data: function (){
    return {}
  }
})

Answer 1

您可以使用Vuex并拥有一个全局存储来存储您的数据

Answer 2

使用Vuex，您可以跨组件共享数据/复杂状态管理。 Vuex存储实例由状态，获取器，动作和变异组成。总而言之，状态“保留”了您的数据，您可以通过状态或获取程序来检索它。动作可以是异步的，例如可以保留一个API调用，之后，您可以将API调用中的数据传递给最终有效地进行更改的突变，而突变不能是异步的。

See: The simplest store

使用Vuex进行的所有操作都可以跟踪应用程序内部发生的情况。乍一看似乎有些令人生畏，但实际上，管理数据确实非常容易。

Answer 3

如果Vuex暂时过于复杂，则可以在需要简单方法时使用本机$ root。

我将Vuex与命名间隔模块一起使用，虽然很棒，但是学习曲线很大，而且文档的确不是那么好。

要利用 $ root ，您可以将regions移至data实例的new Vue({})属性，并使用this.$root.regions从任何地方引用在脚本中或模板中$root.regions中。

var app = new Vue({
  el: '#myForm',
  components: {
    vuejsDatepicker,
    regionsComponent,
  },
  data: function (){
    return {
        regions: []
    }
  }
})

getRegions: function() {

  ...

  axios.get(apiurl+'regions/all', {headers: headers}).then((res)=>{

    if(res.data.responseCode === "01"){
      this.$root.regions = res.data.data;
    } else {
      console.log("failed to load regions")
    }

  })
},

<select ... >
  <option value='' >Select region</option>
  <option v-for="region in $root.regions" :value="region.regionId">{{region.region}}</option>
</select>

这样，任何嵌套级别的任何组件都可以访问全局数据集，而无需任何共享机制。

this。$ set（$ root.myGlobal，newValue）;也可以帮助任何在某些情况下会出现反应性问题。

如何从组件获取变量值并将其分配给vuejs中的另一个组件中的变量

3 个答案: