vue.js内のルータ間で変数を同期

Question

router-viewの変数の値を、異なるroutre-viewの変数を同期して変更したいと思います。ヘッダーに変数isFooを変更してサイドバーにキャッチすると、次のようなコードが書き込まれましたが失敗します。

App.vue：

<template> 
    <v-app id="app"> 
    <router-view name="sidebar"></router-view> 
    <router-view name="header"></router-view> 
    <router-view name="main"></router-view> 
    <router-view name="footer"></router-view> 
    </v-app> 
</template> 
<script> 
export default { 
    name: 'app', 
    isFoo: false 
} 
</script> 

とSidebar.vue：

<template> 
    <div id="sidebar" :isOpen="isFoo"></div> 
</template> 
<script> 
    export default { 
    name: 'sidebar', 
    data() { 
     return {isFoo: this.$parent.$options.isFoo} 
    } 
    } 
</script> 

Header.vue：

<template> 
    <button v-on:click="foo()">Button</button> 
</template> 
<script> 
export default { 
    name: 'header', 
    methods: { 
    foo:() => { 
     this.$parent.$options.isFoo = !this.$parent.$options.isFoo 
    } 
    } 
} 
</script> 

Answer 1

ご質問は、複数のコンポーネント間で状態を共有する方法については、本質的ですあなたのアプリの、かなり一般的です。

isFooをコンポーネント全体にコピーしたため、そのデータの単一の真理値源を参照するのではなく、コードが機能しません。また、コンポーネントの$options内ではなく、各コンポーネントのdataプロパティで反応性データを指定する必要があります。私はそれを動作させるためにあなたのコードを修正しました

：

const Header = { 
 
    template: '<button @click="$parent.isFoo = true">Click Me</button>' 
 
} 
 

 
const Sidebar = { 
 
    template: '<div>Sidebar: {{ $parent.isFoo }}</div>' 
 
} 
 

 
const router = new VueRouter({ 
 
    routes: [ 
 
    { 
 
     path: '/', 
 
     components: { 
 
     header: Header, 
 
     sidebar: Sidebar 
 
     } 
 
    } 
 
    ] 
 
}) 
 

 
new Vue({ 
 
    router, 
 
    el: '#app', 
 
    data: { 
 
    isFoo: false 
 
    } 
 
})

<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script> 
 
<script src="https://rawgit.com/vuejs/vue-router/dev/dist/vue-router.js"></script> 
 

 
<div id="app"> 
 
    <router-view name="header"></router-view> 
 
    <router-view name="sidebar"></router-view> 
 
</div>

しかし私はこの方法をお勧めしません。 this.$parentにアクセスしてはいけません。コンポーネントをしっかりと結合しているからです。

このトピックをカバーするlots of SO questionsがあるため、これを行うためのより良い方法について詳しくは詳しくは説明しません。