Ändern Sie die Variable in der Komponente mit vue.js

Question

Ich habe Navbar Blade, Komponente mit Text und andere Komponenten mit Seite. Es funktioniert, als ob ich eine Komponente mit Text in der Navigationsleiste und eine andere Komponente nach der Navigationsleiste habe. Das sind drei weitere Komponenten. Wie ändert man Text von zum Beispiel index.vue in text.vue?

Das ist, was ich habe:

Text.vue:

<template> 
<p class="title">{{msg}}</p> 
</template> 

<script> 
    export default { 
     props: [ 
      'msg', 
     ], 
     data() { 
      return { 
      } 
     }, 
     mounted() { 
     }, 
     methods: { 
     } 
    } 
</script> 

Komponente in navbar.blade.php:

<navbar-title></navbar-title> 

Und ich versuche es in index.vue zu ändern, das sollte funktionieren, wenn wir uns auf dieser Seite befinden:

data() { 
      return { 
       msg: 'text', 
      } 

Aber es funktioniert nicht. Wie mache ich das richtig?

EDIT:

Vue.component('title', require('./components/Title.vue')); 

Answer 1

Um die Nachricht Variable von Ihrem index.vue durch navbar.vue passieren jeweils title.vue die Eigenschaft, um das Kind zu übergeben muss und jedes Kind muss die Eigenschaft weitergeben wieder alle im ganzen Baum.

So etwas sollte für Ihren Fall arbeiten: <title :msg="msg"></title>