javascript - 当我在 Vue JS 的父组件上按下按钮时如何刷新子组件？

Question

我有一个设置选项，它将从父组件更新。我将这些设置数据保存在 localStorage 上，这三个子组件正在使用设置数据。

<P>
  <c1> </c1>
  <c2> </c2>
  <c3> </c3>
</P>

我想要一种方式，当我更新我的设置数据时，三个组件将刷新或更新以获取新值。例如，我将在父组件上按下一个按钮，然后将更新三个子组件。

------------------------更新-------------------- --------

模板部分:

<template>
  <div class="main-content">
   <div class="main">

<!-- COMPONENT -->
<div class="row">
   <div class="padpad">
      <div class="col-md-6">
         <app-colma></app-colma>
      </div>
      <div class="col-md-3">
         <app-colmb></app-colmb>
      </div>
 
   </div>
</div>

<!-- SAVE BUTTON -->

          <button type="submit" class="btn btn-success" data-dismiss="modal" aria-label="Close" v-on:click="onSubmit()"><span>Save</span></button>
          
          
              
<!-- DATA FORM ( SELECT, OPTION) -->
               <div class="container modal-body">

                  <div class="col-xs-12 col-md-3">
                     <h4>Sortierung</h4>

                     <div class="radio">
                       <label><input value="theropeut" type="radio" name="filterop">Theropeut</label>
                     </div>
                     <div class="radio">
                       <label><input value="ausl_perf" type="radio" name="filterop">Ausl Perf</label>
                     </div>
                     <div class="radio">
                       <label><input value="ausl_bud" type="radio" name="filterop">Ausl Bud</label>
                     </div>
                     <div class="radio">
                       <label><input value="umsatz" type="radio" name="filterop">Umsatz</label>
                     </div>

                     <div class="order-select">
                        <select id="orderid" class="form-control">
                           <option value="ascending">Ascending</option>
                           <option value="descending">Descending</option>
                        </select>
                     </div>
                  </div>
   </div>
</div>
</template>

脚本代码:

<script>
import ColmA from './ColmA.vue';
import ColmB from './ColmB.vue';
import ColmTotal from './ColmTotal.vue';
export default {
  components: {
    'app-colma': ColmA,
    'app-colmb': ColmB,
    'app-colmtotal': ColmTotal
  },
	name: 'main-content',
	data() {
		return {
			users: [],
      filtr:'',
			order:''
		}
	},
	methods: {
    onSubmit: function(){
      // console.log("onsubmit");

      //filter
      var filterop = document.getElementsByName('filterop');

      for (var i = 0, length = filterop.length; i < length; i++) {
          if (filterop[i].checked) {
              // do whatever you want with the checked radio
              // alert(filterop[i].value);
              this.filtr = filterop[i].value;
              // only one radio can be logically checked, don't check the rest
              break;
          }
      }
      //order
      var e = document.getElementById("orderid");
      this.order = e.options[e.selectedIndex].value;

      var homesetting = {
          filter: this.filtr,
          order:this.order,
      };



      if (localStorage.getItem('homesetting') === null) {
        var  homesettings = [];

        // homesettings.push(homesetting);
        localStorage.setItem('homesetting', JSON.stringify(homesetting));
      } else {
        localStorage.removeItem('homesetting');
        localStorage.setItem('homesetting', JSON.stringify(homesetting));

      };
    }

	},

	created: function () {
		this.fetchData();
	}

}

</script>

组件代码:

<script>
export default {
  name: 'colma',
  data () {
    return {
      title: 'A Area',
      colmAdata:[]
    }
  },
  methods: {
    fetchData: function () {
      var self = this;
      var homeObject = JSON.parse(localStorage.getItem('homesetting'));

      // console.log('retrievedObject: ', retrievedObject.filter);
      var filter= homeObject.filter;
      var order= homeObject.order;

      // HERE I NEED MY TWO UPDATED VARIABLES
      var a = 'http://localhost:3000/'+'_'+filter+'_'+order;
      console.log('A',a);


      $.get(apiURL, function (data) {
        self.colmAdata = data;
        // self.$store.state.storeGdata = ' store data from content';
        // console.log(data.people[0].name);

      });

    }

  },
	created: function () {
		this.fetchData();
	}
}
</script>

Answer 1

如果您使用 Vue.JS，您应该真的只使用 Vue.JS - 父级应该有一个模型，其中包含您的设置作为 react 数据。然后，您将此属性作为属性 传递给您的组件，并且该组件只是在该属性上定义一个观察器。

var localStore = { reason: 'Fake, because no localStorage in Sandbox' };

Vue.component('rows', {
  props: ["order"],
  data: function(){ return { values: [] } },
  template: `<ul><li v-for="v in values">{{v}}</li></ul>`,
  created: function() { this.fetchValues() },
  watch: { order: function() { this.fetchValues() } },
  methods: { fetchValues: function() {
    /* Placeholder for an ajax-call with order as a parameter */
    this.values = ( this.order == 'ascending' ) ? [1,2,3] : [3,2,1]
  } }
})

new Vue({
  el: '#main',
  data: { order: 'ascending' },
  created: function() {
    if ( localStore.order ) {
      this.order = localStore.order;
    }
  },
  watch: { order: function() {
    /* Save any change on order in the local storage */
    localStore.order = this.order;
  } }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.js"></script>

<div id="main">
  <select v-model="order">
    <option value="ascending">Sort Ascending</option>
    <option value="descending">Sort Descending</option>
  </select>

  <rows :order="order"></rows>
</div>