Vueルーター。バインドデータ

Question

私はvueアプリケーションを開発していますが、現在はvueルータを使用する必要があります。 しかし、データをルータテンプレートにバインドするのに少し問題があります。

私を助けてください。

HTML：

<div id="app"> 
    <h1>Hello App!</h1> 
    <p> 
    <router-link to="/foo">Go to Foo</router-link> 
    <router-link to="/bar">Go to Bar</router-link> 
    </p> 
    <router-view></router-view> 
</div> 

スクリプト：

const Foo = { template: '<div>{{foo}}</div>' } 
const Bar = { template: '<div>bar</div>' } 


const routes = [ 
    { path: '/foo', component: Foo }, 
    { path: '/bar', component: Bar } 
] 

const router = new VueRouter({ 
    routes 
}) 


const app = new Vue({ 
el: '#app', 
    router, 
    data: function(){ 
    return {foo: "asdasdas"} 
    } 
}) 

{{foo}}バインドは動作しません。

ライブ例： https://jsfiddle.net/xgrjzsup/4430/

Answer 1

あなたのケースでは、あなたがその "foo" というVARにアクセスできる2つの方法があります。

{{$parent.foo}} 
{{$root.foo}} 

しかし、あなたのアプリケーションでデータを共有するためのVuexを使用することを検討 - https://github.com/vuejs/vuex をまたはルートへのパラメータとしてそのFOOを渡す - それは動作しませんOFC https://router.vuejs.org/en/essentials/passing-props.html

Answer 2

。使用するテンプレートにデータを設定する必要があります。あなたのケースで

：

const Foo = { 
    template: '<div>{{foo}}</div>', 
    data() { 
    return { 
     foo: 'magic' 
    } 
    } 
} 

乾杯と幸せコーディング。 guide on componentsから

Answer 3

：

すべてのコンポーネントのインスタンスは、それ自身の単離された範囲を有しています。これは、 子の親データを直接参照することはできません（またはしないでください）。 コンポーネントのテンプレートです。データは、小道具を使用して子コンポーネント に渡すことができます。

およびFooは、ルータ経由で設定したアプリの子コンポーネントです。

親から子へデータを渡す1つの方法は、小道具を使用することです。

const Foo = { 
    props: ['foo'], 
    template: '<div>{{foo}}</div>' 
} 

をして

<router-view :foo="foo"></router-view> 

更新フィドルテンプレートで親プロパティをバインドします：

はfooプロパティを受け入れるようにFoo定義を変更しhttps://jsfiddle.net/xgrjzsup/4431/