Question

我正在使用laravel + vue。我想在导航栏中做页面标题，所以当你在索引中时，在navbar中是文本索引。当您处于设置中时，导航栏会显示设置等。

我认为道具对它有好处，但是当我使用它时，它的效果并不好。看这里：

index.php索引：

@extends('layout.app')

@section('content')
    <index :msg="msg"></index>
@endsection

index.vue：

props: [
            'msg'
        ],

现在navbar：

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

<script>
    export default {
        props: [
         ],
        data() {
            return {
            }
        },

    }
</script>

和布局：

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

当我们在不同的网页上时，如何更改导航栏中的{{msg}}段落？我的代码不起作用。

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Answer 1

如果要使用prop，则需要在组件的props对象中定义它。在NavBar中，您引用了msg，但NavBar中的props对象为空。定义它并在layout.blade.php中传递道具。

或者您也可以定义一个计算属性，您可以在其中查看当前路径并返回适合您业务的字符串。 https://vuejs.org/v2/guide/computed.html

如果要在多个组件之间共享数据，请使用建议的商店（VUEX）:)

使用props在vue.js中的每个页面上设置不同的文本

1 个答案: