使用 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>