1
我有一個設置選項，它將從父組件更新。我將這些設置數據保存在localStorage上，這三個子組件正在使用設置數據。如何在Vue JS的父組件上按下按鈕時刷新子組件？
<P>
<c1> </c1>
<c2> </c2>
<c3> </c3>
</P>
我想要一種方式，當我將更新我的設置數據時，三個組件將刷新或更新以獲取新值。 像，我會按下父組件上的一個按鈕，三個孩子將被更新。
------------------------ UPDATED --------------------- ---------
模板部件：
<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
},
\t name: 'main-content',
\t data() {
\t \t return {
\t \t \t users: [],
filtr:'',
\t \t \t order:''
\t \t }
\t },
\t 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));
};
}
\t },
\t created: function() {
\t \t this.fetchData();
\t }
}
</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);
});
}
},
\t created: function() {
\t \t this.fetchData();
\t }
}
</script>
你嘗試過什麼？你在哪裏研究？ – Script47