変更された値をVue.js内の他のコンポーネントのメソッドに渡す方法は？ヘッダーコンポーネントで

Question

、のはApp.vueそれを呼びましょう、select要素があります。同じコンポーネントで

<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としましょう。ロケールパラメータが変更されましたか？私はバインドされたDOM要素ではなく、コードで新しい値（JSメソッドを使用）を取り上げたいと思います。変更されたロケールのために新しい値がページリロードをトリガするはずです。 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

1つのアイデアは、2つのピア間の通信を管理するための1つのアイデアです。年齢以下のようになります。この始まりと

<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/

それは、あなたの質問に答えるのか？