gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 03:31:16 25 4
gpt4 key购买 nike

我正在使用 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com