vue-Router Zugriff Komponentendaten

Question

ich mit einem Beispiel aus vue-Router-Dokumentation gegeben spiele

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> 

JavaScript:

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

Ist es möglich, ausgewählte Komponente zuzugreifen Daten außerhalb des Ankers und aktualisieren {{title}} header?

Voll Beispiel ist here

Answer 1

ich zwei Möglichkeiten habe. Die erste besteht darin, Ihre Elterndaten direkt mit this.$parent.title zu bearbeiten. Und die zweite Möglichkeit ist, ein Ereignis this.$parent.$emit('changeTitle', 'foo'); auszulösen.

Ich denke, das letzte ist besser, weil die Kontrolle Ihres Staates immer in Ihrer Elternkomponente ist.

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>