在 Vuejs 的上下文中，我怎样才能只有一个组件而不是不同的组件答案

【问题标题】：How can i just have one Component instead of different components in the context of Vuejs在 Vuejs 的上下文中，我怎样才能只有一个组件而不是不同的组件
【发布时间】：2021-04-06 15:05:53
【问题描述】：

我是 Vuejs 的新手，我正在使用 4 个不同的组件，在每个组件中我都调用了 API。这里有 4 个不同的组件，除了内容不同。

现在，我想让我的代码有效，所以我想要一个组件，我创建不同组件的原因是我的另一个 App.vue 组件有 4 个不同的按钮，所以每当你点击它时，它将打开相应的组件。

但是现在我只想拥有一个组件而不是四个不同的组件，并且每当单击 App.vue 组件中的按钮时，它应该在单个组件中打开确切的内容（而不是 4 个组件）。

请通过分享您的想法和示例来帮助我。

【问题讨论】：

标签： vue.js components

【解决方案1】：

在这种情况下，您可以使用 props，这是一种将数据传递给“子”组件的方式。

https://vuejs.org/v2/guide/components-props.html

示例

App.vue

<template>
  <div id="app">
    <SingleComponent :button="button" />
  </div>
</template>

<script>
import SingleComponent from "@/components/SingleComponent.vue";
// @/ means src/

export default {
  name: "App",
  components: {
    SingleComponent,
  },
  data: () => ({
    button: 2,
  }),
};
</script>

SingleComponent.vue

<template>
  <div>
    <button v-if="button === 0">...</button>
    <button v-else-if="button === 1">...</button>
    <button v-else-if="button === 2">...</button>
    <button v-else-if="button === 3">...</button>
  </div>
</template>

<script>
export default {
  name: "SingleComponent",
  props: {
    button: {
      type: Number,
      required: true,
    },
  },
};
</script>

您还应该看看 slots，它在 Vue.js 中非常重要，也可以解决您的问题。

https://vuejs.org/v2/guide/components-slots.html

【讨论】：