如何在Vue.js中將更改的值傳遞給其他組件的方法？

Question

在頭組件，讓我們把它叫做App.vue，有一個選擇的元素：

<select v-model="locale"> 
<option value="en">English</option> 
<option value="pl">Polski</option> 
</select> 

在同一組件，由用戶選擇的選項watch得到處理：

watch: { 
locale (val) { 
    this.$i18n.locale = val; 
    console.log("locale: ", val); 
    localStorage.setItem("userPrefLang", val); 
    } 
}, 

我怎樣才能通知其他組件（兄弟姐妹，而不是兒童），假設Users.vue，區域設置參數已更改？我想在代碼中使用新值（使用JS方法），而不是綁定DOM元素。新值應該由於更改區域設置而觸發頁面重新加載。我應該使用Users.vue的觀察者，props還是有其他方法？

Answer 1

Vue公司有這樣的一種方式，event bus這裏是它告訴你如何做到這一點 https://vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication

您也可以參考這個有用的文章 https://alligator.io/vuejs/global-event-bus/

它可以查看的文檔的鏈接像這樣的東西

var bus = new Vue() 
// in component A's method 
bus.$emit('language-change', 'en') 
// in component B's created hook 
bus.$on('language-change', function (language) { 
    // ... 
}) 

Answer 2

一個想法是有一個根組件管理兩個對等體之間的通信，使您的p年齡是這樣的：

<div id="root"> 
    <app></app> 
    <users></users> 
<div> 

有了這個開端，下一步可以通過道具來傳遞語言環境的用戶：

<div id="root"> 
    <app></app> 
    <users :locale="rootLocale"></users> 
<div> 

要更新rootLocale，我們可以偵聽由應用程序發出的事件：

<div id="root"> 
    <app @locale-changed="localeChanged"></app> 
    <users :locale="rootLocale"></users> 
<div> 

將其組合在一起，這裏的組件定義：

var app = { 
    name: 'app', 
    template: 
    `<select v-model="locale"> 
     <option value="en">English</option> 
     <option value="pl">Polski</option> 
    </select>`, 
    data: function() { 
    return { 
     locale: "en" 
    } 
    }, 
    watch: { 
    locale: function() { 
     this.$emit('locale-changed', this.locale); 
    } 
    }, 
}; 

var users = { 
    name: 'users', 
    template: 
    `<div> 
     <div>{{message}}</div> 
     <div>{{locale}}</div> 
    </div>`, 
    props: ['locale'], 
    data: function() { 
    return { 
     message: 'awaiting change' 
    } 
    }, 
    watch: { 
    locale: function() { 
     this.message = 'locale changed' 
    } 
    } 
}; 

這裏是根元素：

var vm = new Vue({ 
    el: "#root", 
    components: { app, users }, 
    data: function() { 
    return { 
     rootLocale: '' 
    } 
    }, 
    methods: { 
    localeChanged: function (val) { 
     this.rootLocale = val; 
    } 
    } 
}); 

完整的示例是JsFidde：https://jsfiddle.net/zfp5rLb7/1/

是否回答你的問題？