将导航栏移至Vue的App组件后页面切换功能失效求助

核心原因：违反Vue单向数据流规则 #

你遇到的问题本质是子组件直接修改了props属性。Vue中props是父组件传递给子组件的只读数据，子组件不能直接修改props的值——这种操作不会触发父组件的状态更新，自然无法同步到page-viewer组件，导致页面切换失效。

之前放在<body>中能生效，大概率是因为activePage是挂载在全局Vue实例上的属性，子组件里的修改直接作用于全局状态；而移到App组件后，activePage变成了App组件的局部状态，通过props传递给navbarr，此时子组件直接修改props的行为就会被Vue的单向数据流机制限制，无法触发父组件的状态更新。

修复步骤 #

1. 修改子组件navbarr，通过事件通知父组件更新 #

把导航项的点击事件从直接修改props，改成触发自定义事件：

app.component('navbarr',{
    computed:{
        navbarClasses(){
            return{
                'bg-light':!this.darkNav,
                'bg-dark':this.darkNav
            }
        }
    },
    props:['pages','activePage'],
    template:`
    <ul class="nav" :class="navbarClasses">
        <form class="d-flex">
        <div class="form-check form-switch">
            <input class="form-check-input" @click="darkNav=!darkNav" type="checkbox" role="switch" id="flexSwitchCheckDefault">
        </div>
        </form>
        <li v-for="(page,index) in pages" class="nav-item" :key="index">
          <a class="nav-link" :href="page.link.url"
          :class="{active:activePage==index}"
          :title="\`This goes to \${page.link.text} page\`"
          @click.prevent="$emit('update:active-page', index)" <!-- 此处修改 -->
          >{{page.link.text}}</a>
        </li>
    </ul>
    `,
    data(){
        return{
            darkNav:false,
        }
    }
})

2. 在父组件（App组件）中监听事件并更新状态 #

在App组件的template里，给navbarr组件添加事件监听，或者使用.sync修饰符简化写法：

写法一：使用.sync修饰符（Vue 2/3兼容）

<navbarr
  :pages="pages"
  :active-page.sync="activePage"
></navbarr>

写法二：手动监听事件

<navbarr
  :pages="pages"
  :active-page="activePage"
  @update:active-page="activePage = $event"
></navbarr>

这样，当用户点击导航项时，子组件会触发update:active-page事件，父组件接收到事件后更新自己的activePage状态，page-viewer组件就能同步拿到最新的页面数据，实现无刷新切换。

额外注意点 #

• 确保父组件App中的activePage是声明在data中的响应式属性，比如：

app.component('App', {
  data() {
    return {
      activePage: 0, // 默认选中第一个页面
      pages: [] // 你的页面数据数组
    }
  }
})

• 子组件中的activePage作为props，只能用来展示状态，不能直接赋值修改，所有状态更新都要通过事件通知父组件完成。

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