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

Question

这是我的代码，我没有使用webpack，只是vuejs cdn。我想将regionComponent中的区的值获取到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太复杂，你可以在需要简单的方法时使用原生的$root。

我将 Vuex 与名称间隔模块一起使用，它很棒，但它的学习曲线很长，而且文档并不是那么好。

要利用 $root，您可以将 regions 移动到您的 new Vue({}) 实例的 data 属性，并在脚本中使用 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);也可以帮助任何 某些情况下的反应性问题。

Answer 2

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

Answer 3

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

See: The simplest store

使用 Vuex 进行的所有操作都可以跟踪您的应用程序内部发生的事情。起初看起来有点令人生畏，但实际上，管理您的数据真的很容易。