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 것을 액세스 할 수있는 두 가지 방법이 있습니다.

{{$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은 라우터를 통해 설정된 앱의 하위 구성 요소입니다.

부모로부터 자식으로 데이터를 전달하는 한 가지 방법은 소품을 사용하는 것입니다.

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

및

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

업데이트 된 바이올린 템플릿에 부모의 속성을 바인딩 :

는 foo 속성을 허용하도록 Foo 정의를 수정 https://jsfiddle.net/xgrjzsup/4431/