javascript - 如何将对象传递给 VueJS 中的 Prop 值

Question

我正在将我的一些组件变成可重复使用的组件。我在这里遇到了一些我无法弄清楚的问题。来自 React 环境，我的思绪越来越困惑。基本上，我需要能够使 Prop 比 bool 值或字符串或任何原始值更通用。我需要能够将“内容”传递给它，它可以根据用途从一个页面更改到另一个页面

例如，我有这个无状态组件:

<template>
   <div class="cts-split-grid cts-alt-header">
      <div>{{title}}</div>
      <div v-if="rightSide" class="cts-split-grid">
        <span class="uk-text-small">Pod or station is open</span>
        <span class="legend-color"></span>
      </div>
   </div>
</template>

<script>
 export default {
     name: "page-alt-header",
     props: {
         title: {
             type: String
         },
         rightSide: {
             type: Boolean
         }
     },
     data() {
         return {
             value: ""
         };
     }
 };
</script>

我是这样用的

 <AltHeader :title="'POD' + currentPodId" rightSide />

如您所见，在标题中我传递了一个绑定(bind)到组件的对象 currentPodId。这很容易，因为该对象只产生一个数据值。

我想从可重用组件中删除这个(下面)，并能够使用 AltHeader 作为右侧 Prop 将其添加到组件中:

<span class="uk-text-small">Pod or station is open</span>
<span class="legend-color"></span>

之所以如此，是因为这个组件的右侧可以是任何东西，从图标组件到按钮，再到一小块 HTML 等等。

我该怎么做？我如何设置 rightSide prop 以接受我在组件级别传递给它的任何内容，具体取决于我需要如何使用它？

谢谢

Answer 1

你应该使用 slots

<template>
   <div class="cts-split-grid cts-alt-header">
      <div>{{title}}</div>
      <div v-if="rightSide" class="cts-split-grid">
       <slot></slot>
      </div>
   </div>
</template>

并添加右侧内容如下:

  <AltHeader :title="'POD' + currentPodId" rightSide >
      <!-- side right content here -->
  </AltHeader>