vue.jsを使用してコンポーネント内の変数を変更します。

Question

私はnavbarブレード、テキストを含むコンポーネント、およびページを持つ別のコンポーネントを持っています。 これは、navbarにテキストのあるコンポーネントとnavbarの後に別のコンポーネントがあるように機能します。それは3つの別の要素です。 text.vueのindex.vueなどのテキストを変更するにはどうすればよいですか？

私が持っているものです。

Text.vue：navbar.blade.phpで

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

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

コンポーネント：

<navbar-title></navbar-title> 

そして、私はindex.vueでそれを変更しようとすると、このページにアクセスしたときに動作するはずです：

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

しかし、動作しません。どのように正しく行うには？

EDIT：

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

Answer 1

子供に財産を渡すために、それぞれのニーズをtitle.vueすると、それぞれの子は再びすべてのプロパティを渡す必要がありnavbar.vueを通して、あなたのindex.vueからのメッセージ変数を渡すために木全体にこのような

何かがあなたのケースのために働く必要があります。<title :msg="msg"></title>