Question

我正在将某些组件变成可重用的组件。我遇到了一些我无法解决的问题。来自React环境，我的想法陷入了困境。基本上，我需要能够使道具比布尔值或字符串或任何原始值更通用。我需要能够将“内容”传递给它，根据使用的内容，页面之间可能会发生变化

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

import static java.lang.System.*;

class Best
{
    int x;
    int y;
}

class Test implements Cloneable
{
    int a;
    int b;
    Best bt = new Best();

    public Object clone()throws CloneNotSupportedException
    {
    return super.clone();   
    }
}

public class Check 
{
    public static void main(String [] args) throws CloneNotSupportedException
    {
        Test t1 = new Test();
        t1.a=20;
        t1.b=30;
        t1.bt.x = 300;
        t1.bt.y = 200;

        Test t2 = (Test)t1.clone();

        t2.a=50; //change reflects only in cloned object
        t2.bt.x = 500; //change reflects in both original and cloned object

        out.println(t1.a+" "+t1.b+" "+t1.bt.x+" "+t1.bt.y);
        out.println(t2.a+" "+t2.b+" "+t2.bt.x+" "+t2.bt.y);
    }
}

我正在使用这种方式

<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 />。这很容易，因为该对象仅产生数据值。

我想从可重复使用的组件中删除此（以下）组件，并能够使用AltHeader作为右侧支持组件将其添加到组件中：

currentPodId

之所以这样，是因为该组件的右侧可以是从Icon组件到按钮，到一小段HTML等的任何内容。

我该怎么做？我该如何设置<span class="uk-text-small">Pod or station is open</span> <span class="legend-color"></span>道具来接受我在组件级别传递给它的任何东西，具体取决于我需要如何使用它？

谢谢

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>

如何在VueJS中将对象传递给prop值

1 个答案: