Vue.js重构导航栏后theme值被识别为undefined的问题求助

问题描述 #

在Vue.js中重构导航栏时，原本导航栏在app.component外部运行正常，将其整合到app.component内并配置对应方法与值赋值后，theme值被识别为undefined。

问题分析 #

你的代码中存在三个核心问题：

• navbar组件的动态class绑定使用了嵌套模板字符串，Vue解析时无法正确识别组件data中的theme属性，导致undefined；
• 直接修改父组件传递的activePage props，违反Vue单向数据流规则；
• page-viewer组件中错误使用了className（Vue中应使用class）。

修复方案 #

1. 修正动态class写法 #

将嵌套模板字符串改为字符串拼接形式，避免解析歧义：

<!-- 修改前 -->
:class="[\`navbar-${theme}\`,\`bg-${theme}\`, 'navbar', 'navbar-expand-lg']"

<!-- 修改后 -->
:class="['navbar-' + theme, 'bg-' + theme, 'navbar', 'navbar-expand-lg']"

2. 修复props直接修改问题 #

通过自定义事件通知父组件修改activePage：

• navbar组件内修改点击事件：

@click.prevent="$emit('update:activePage', index)"

• 父组件使用v-model绑定activePage（Vue 3支持自定义v-model）：

<navbar
    :pages="pages"
    v-model:active-page="activePage">
</navbar>

3. 修正page-viewer组件语法错误 #

将className替换为Vue标准的class：

<!-- 修改前 -->
<div className="container">

<!-- 修改后 -->
<div class="container">

完整修复代码 #

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue Basics</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>

<navbar
    :pages="pages"
    v-model:active-page="activePage">
</navbar>


<page-viewer
        :page="pages[activePage]">
</page-viewer>


<script>
    let app = Vue.createApp({
        data() {
            return {
                activePage: 0,
                pages: [
                    {
                        link: {text: 'Home', url: 'index.html'},
                        pageTitle: 'Home',
                        content: 'This is the Home Content'
                    },
                    {
                        link: {text: 'About', url: 'about.html'},
                        pageTitle: 'About',
                        content: 'This is the About Content'
                    },
                    {
                        link: {text: 'Contact', url: 'contact.html'},
                        pageTitle: 'Contact',
                        content: 'This is the Contact Content'
                    }
                ]
            };
        }

    });

    app.component('page-viewer', {
        props: ['page'],
        template:
            `
            <div class="container">
                <h1>{{page.pageTitle}}</h1>
                <p>{{page.content}}</p>
            </div>
            `

    });

    app.component('navbar', {
        props: ['pages', 'activePage'],
        data() {
            return {
                theme: 'light'
            }
        },

        methods: {
            changeTheme() {
                this.theme = this.theme === 'light' ? 'dark' : 'light';
            }
        },
        template:
        `
          <nav class="navbar navbar-expand-lg"
               :class="['navbar-' + theme, 'bg-' + theme, 'navbar', 'navbar-expand-lg']">
          <div class="container-fluid">
            <a href="#" class="navbar-brand">My Vue</a>
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
              <li v-for="(page, index) in pages" class="nav-item" :key="index">
                <a :href="page.link.url"
                   :title="\`This link goes to the ${page.link.text} page\`"
                   @click.prevent="$emit('update:activePage', index)"
                   aria-current="page"
                   class="nav-link"
                   :class="{active: activePage == index}"
                >{{ page.link.text }}</a>
              </li>
            </ul>

            <form class="d-flex">
              <button class="btn btn-primary"
                      @click.prevent="changeTheme()">
                Toggle Button
              </button>
            </form>
          </div>
          </nav>
        `

    })

    app.mount('body')
</script>

</body>
</html>

内容的提问来源于stack exchange，提问作者JustRob