Javascript 从另一个组件访问其他组件数据和方法

我有两个部分：

ContainerSidebar.vue

<!-- Sidebar -->
    <div id="b-sidebar">
      <div class="change-image">
        <img
          :src="profile.avatar != null ? profile.avatar+'#'+Date.now() : 'https://redacted.com/avatar/no-image.png'"
          alt=""
        >
      </div>
      <h6>{{profile.email}}</h6>
      <a-menu
        :default-selected-keys="['1']"
        mode="inline"
        theme="dark"
        style="height: 100%;"
      >
        <a-menu-item key="1" style="margin-top: 70px" v-if="this.$route.path !== '/profile'">
          <home-icon icon-name="home" style="margin-right: 10px"></home-icon>
          <span>Beranda</span>
        </a-menu-item>
        <a-menu-item key="1" style="margin-top: 30px" v-else>
          <a-icon type="user" style="margin-right: 10px; font-size: 18px;"/>
          <span>Profil Saya</span>
        </a-menu-item>

        <a-sub-menu key="sub1" v-if="this.$route.path !== '/profile'">
          <span slot="title">
            <book-icon icon-name="book" style="margin-right: 10px"></book-icon>
          <span>Kelas Saya</span></span>
          <a-menu-item key="5" style="padding-left: 20px">
            <a-icon type="calendar" style="font-size: 18px"/>
            Jadwal Webinar
          </a-menu-item>
          <a-menu-item key="6" style="padding-left: 20px">
            <award-icon icon-name="home" style="margin-right: 10px"></award-icon>
            Sertifikat Saya
          </a-menu-item>
        </a-sub-menu>



        <a-menu-item key="2" v-if="this.$route.path !== '/profile'">
          <bag-icon icon-name="bag" style="margin-right: 10px"></bag-icon>
          <span>Katalog Saya</span>
        </a-menu-item>
        <a-menu-item key="2" v-else>
          <a-icon type="lock" style="font-size: 18px"/>
          <span>Ubah Sandi</span>
        </a-menu-item>

        <a-menu-item key="3" v-if="this.$route.path !== '/profile'">
          <file-icon icon-name="file" style="margin-right: 10px"></file-icon>
          <span>Projek Saya</span>
        </a-menu-item>
        <a-menu-item key="3" v-else>
          <a-icon type="question-circle" style="font-size: 18px"/>
          <span>Panduan</span>
        </a-menu-item>

        <a-menu-item key="4" v-if="this.$route.path === '/profile'" @click="logout">
          <i class="fas fa-sign-out-alt" style="margin-right: 13px"></i>
          <span>Keluar</span>
        </a-menu-item>

      </a-menu>
    </div>

考虑到容器debar.vue是父组件，而概要文件.vue是子组件。如何访问在Profile.vue内部操作

页面

数据变量的

change\u page（）

方法？我所期望的是将

change\u page（）

方法放在这个部分上

<a-menu-item key="2" v-else>
   <a-icon type="lock" style="font-size: 18px"/>
   <span>Ubah Sandi</span>
</a-menu-item>

---

但我仍然无法找出与我自己的代码的相似性。
您需要像这样从child发出父方法：

<parent-component class="container">
  <your-child-component @changePage="change_page"></your-child-component>
</parent-component>


    @click="changePage("page_name")"


调用handleChangePage后，子方法内部的handleChangePage将由父方法执行
change\u page
使用Vuex解决此问题：

store.js


    import Vue from 'vue';
    import Vuex from 'vuex';
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({
      state: {
        profile_page: 'profile',
      },
      mutations: {
        changePage(state, page) {
          state.profile_page = page;
        }
      },
    });
    
    export default store


然后提交父组件和子组件上的状态，我在方法中使用commit语句创建了一个方法：

    changePage(page) {
       this.$store.commit('changePage', page);
    },

然后在html标记内添加一个单击事件，如下所示：

<parent-component class="container">
  <your-child-component @changePage="change_page"></your-child-component>
</parent-component>


    @click="changePage("page_name")"


问题已解决。
哪些代码放入
Profile.vue
和
ContainerSidebar.vue
？执行
this.$emit（'changePage'，'/profile'）部分可以更改为
this.$emit（'changePage'，'page_name'）？
此。$emit（'changePage'，'page_name'）应位于Profile.vue组件中。是的，您可以将
/profile
更改为
page\u name
我应该将
/code>放入
ContainerSidebar.vue
还是
profile.vue
？您应该将
放入
ContainerSidebar.vue
根据我的示例，
和
更改为什么？这让我有点困惑