Question

我有导航栏刀片，带有文本的组件和带页面的其他组件。它就像我在navbar中有文本组件，在navbar后有另一个组件。那是另外三个组成部分。如何在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>

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

1 个答案: