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

标签 javascript php laravel vue.js vuejs2

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

我认为 props 很有用,但是当我使用它时,它的效果并不好。看这里:

索引的blade.php:

@extends('layout.app')

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

index.vue:

props: [
            'msg'
        ],

现在导航栏:

<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.

最佳答案

如果你想使用 prop,那么你需要在组件的 props 对象中定义它。在导航栏中,您引用了 msg,但导航栏中的 props 对象为空。定义它并在您的layout.blade.php中传递prop。

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

如果您想在多个组件之间共享数据,请按照建议使用存储(VUEX):)

关于javascript - 在 vue.js 中使用 props 在每个页面上设置不同的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46094994/

相关文章:

javascript - 销售人员 1(光环平台): How to pass values from a client-side-code(JavaScript code) to server-side-code(APEX)?

php - Laravel5.7 php 中的 Google 身份验证并出现 “Missing required parameter: code” 错误 400

php - Laravel Storage::disk()->url();不能正常工作

javascript - $ ("selector") 和 $ ("selector").toArray() 有什么区别

javascript - 有没有办法用 JavaScript 中的移位器来增加或减少数字?

php - 使用 PHP PDO 对象连接 MSSQL 数据库

php - Laravel 4 插件系统

php - 我正在 laravel 中开发注册表单,但是当单击提交按钮时,它不会重定向到我的登录页面,这是为什么?

java - 如何使用 Javascript 或 Java Servlet 获取客户端信息?

php - 如何在 wamp 中安装 Varnish ?