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

Question

我有两个组件：

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>

另一个是Profile.vue，我要展示的部分只是js部分

export default {
  data() {
    return {
      page: 'profile',
    };
  },
  methods: {
    change_page(page) {
      this.page = page;
    },
  },

考虑 ContainerSidebar.vue 是父组件，而 Profile.vue 是子组件。我如何访问 change_page() 方法，该方法在内部操纵 Profile.vue 上的 page 数据变量？我对此的期望是将change_page()方法放在这部分

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

使用@click 事件。我在这里找到了几个示例，例如Access data from another Component，但我仍然无法弄清楚与我自己的代码的相似之处。

Answer 1

用 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

然后在父子组件上提交状态，我在方法内部用提交语句做了一个方法：

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

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

    @click="changePage("page_name")"

问题解决了。

Answer 2

你需要像这样从孩子发出你的父方法：

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

在你的子组件js代码中：

export default {
methods: {
    handleChangePage() {
        this.$emit('changePage', '/profile');
    },
},
};

在子方法内部调用handleChangePage后将被父方法change_page执行