Vue.js中如何从组件渲染另一个组件（不使用路由）

没问题，咱们可以通过条件渲染和组件通信来实现这个需求，完全不用路由。下面是具体的实现步骤：

核心思路是用一个状态变量控制当前显示哪个组件，同时存储选中的item.type值，再通过props把值传递给StoreComponent。

1. 修改列表组件（含v-for的组件） #

脚本部分 #

先添加响应式状态，用来控制组件切换和存储选中的类型：

export default {
  data() {
    return {
      store: [/* 你的数据数组 */],
      showStoreComponent: false, // 控制是否显示StoreComponent
      selectedItemType: null // 存储选中的item.type
    }
  },
  methods: {
    // 点击<a>时触发的方法
    handleItemClick(type) {
      this.selectedItemType = type;
      this.showStoreComponent = true;
    },
    // 可选：从StoreComponent返回列表的方法
    backToList() {
      this.showStoreComponent = false;
      this.selectedItemType = null;
    }
  }
}

模板部分 #

用v-if和v-else实现视图切换，给<a>绑定点击事件：

<!-- 未选中时显示列表 -->
<div v-if="!showStoreComponent">
  <div v-for="item in store" :key="item.type">
    <a @click="handleItemClick(item.type)">{{ item.type }}</a>
  </div>
</div>

<!-- 选中后显示StoreComponent -->
<StoreComponent 
  v-else 
  :item="selectedItemType"
  @back="backToList" <!-- 可选：绑定返回事件 -->
/>

2. 调整StoreComponent（可选，添加返回功能） #

如果需要从StoreComponent回到列表，可以加个返回按钮，通过自定义事件通知父组件切换视图：

<template>
  <div>
    <!-- 你的组件内容 -->
    <p>当前选中的类型：{{ datum }}</p>
    <button @click="goBack">返回列表</button>
  </div>
</template>

<script>
export default {
  name: 'StoreComponent',
  props: ['item'],
  data: function () {
    return {
      datum: this.item
    }
  },
  methods: {
    goBack() {
      this.$emit('back'); // 触发父组件的back事件
    },
    // 你的自定义方法
  }
}
</script>

关键说明 #

• 条件渲染：通过v-if/v-else在当前组件内切换视图，完全不会修改URL，符合你的需求。
• props传递：把选中的item.type通过props传递给StoreComponent，满足数据传递要求。
• 组件通信：如果需要返回功能，用$emit触发自定义事件，通知父组件切换回列表。

这样就能实现你要的效果：点击列表中的<a>，用StoreComponent覆盖当前列表，同时传递对应的类型值，全程不涉及路由跳转。

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