Question

我正在使用laravel和vue构建应用程序。我有导航栏，目前看起来像：

<template>
<nav class="navbar">
    <p>{{msg}}</p>
</nav>
</template>

我在这里使用它：

 <body class="">
        <div id="app">
            <div class="">
            <navbar></navbar>
            @yield('content')
            </div>
        </div>
    </body>

在收益中我正在加载另一个组件，因此我将导航栏和另一个组件放在一起。现在我想在另一个组件中覆盖导航栏中的{{msg}}变量。在每个组件中，变量都是不同的。

我不知道如何在组件中覆盖它，并从{{msg}}做一些文本。你能帮助我吗？（上面的代码就是我所拥有的）

Answer 1

如果您想在其他组件中使用msg，则需要使用prop

使用类似：

props: ['msg'],

然后，你需要绑定它：

<component-name :msg="msg"></component-name>

在您的组件中，您可以将其视为：

<template>{{ msg }}</template>

希望你明白！

Answer 2

组件可与道具通信。您可以将数据传输到另一个组件，然后使用if语句。

https://vuejs.org/v2/guide/components.html#Props

在组件之间传递vue.js中的变量

2 个答案: