VUE 라우터 액세스 구성 요소 데이터

HTML :

<div id="app"> 
    <h3>{{title}}</h3> 
    <router-link to="/">/home</router-link> 
    <router-link to="/foo">/foo</router-link> 
    <router-view></router-view> 
</div>

자바 스크립트 :

const Foo = { template: '<div>foo</div>', data: {title: "Foo" } 
const Bar = { template: '<div>bar</div>', data: {title: "Bar" }

은 선택한 구성 요소에 액세스 할 수 있나요 앵커 외부의 데이터 및 {{title}} 헤더를 업데이트 하시겠습니까?

전체 예를 들어 내가 두 가지 가능성을했습니다 here

출처

2017-09-18 user939407

입니다. 첫 번째는 this.$parent.title으로 직접 상위 데이터를 수정하는 것입니다. 두 번째 방법은 이벤트 this.$parent.$emit('changeTitle', 'foo');을 트리거하는 것입니다.

여러분의 상태 제어가 항상 부모 구성 요소에 있기 때문에 마지막 것이 더 좋다고 생각합니다. 답변에 대한

출처

2017-09-18 10:30:37 Phil

안녕하세요

const Home = { template: '<div>Home</div>', data: { title: "Home" }, mounted() { this.$parent.title = 'home'; // directly } } const Foo = { template: '<div>Foo</div>', data: { title: "Foo" }, mounted() { this.$parent.$emit('changeTitle', 'foo'); // emit an event } } const router = new VueRouter({ mode: 'history', routes: [ { path: '/', component: Home }, { path: '/foo', component: Foo } ] }) new Vue({ router, el: '#app', data: { title: 'Initial' }, destroy() { this.$off('changeTitle'); }, created() { const _self = this; this.$on('changeTitle', function(newTitle) { _self.title = newTitle; }); } })

<script src="https://npmcdn.com/vue/dist/vue.js"></script> <script src="https://npmcdn.com/vue-router/dist/vue-router.js"></script> <div id="app"> <h3>{{title}}</h3> <router-link to="/">/home</router-link> <router-link to="/foo">/foo</router-link> <router-view></router-view> </div>

, 감사합니다. 동의 해 두 번째 해결책이 더 좋습니다. – user939407

VUE 라우터 액세스 구성 요소 데이터

답변

관련 문제