使用vue.js更改组件中的变量

Question

我有导航栏刀片，组件与文本和另一个组件与页面。它的工作原理就像我在导航栏中有带文本的组件，在导航栏之后有另一个组件。这是另外三个组件。如何在text.vue中更改文本，例如index.vue？

这就是我所拥有的：

Text.vue：

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

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

Navbar.blade.php中的组件：

    <navbar-title></navbar-title>

我试着在index.vue中更改它，当我们在这个页面上时，它应该可以工作：

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

但它不起作用。怎样做才是正确的呢？

编辑：

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

Answer 1

要将消息变量从index.vue通过navbar.vue传递给title.vue，每个子对象都需要将属性传递给子对象，并且每个子对象都必须在整个树中再次传递该属性。

下面这样的代码应该适用于您的情况：<title :msg="msg"></title>