组件安装两次

Question

我有一个由click函数呈现的简单组件，但是它被呈现了两次，这是我的代码。

<SeeCompany
    :is="create"
    v-bind:companyId="companySelected"
    @closeChild="closeModule"
  />

当我单击按钮时，将创建值更改为“ SeeCompany”，以便将其安装，但它会在屏幕上重复两次相同的组件文本。

<b-button block
    @click="create = 'SeeCompany'"
    class="m-sides"
    variant="outline-primary">
        Ver
</b-button>

这是图片：

编辑：这是已安装的代码

export default class SeeCompany extends Vue {

    @Prop({ default: 0 }) private companyId !: number;

    constructor() {
        super();
    }

    private mounted() {
      console.log(this.companyId); --> This is consoling two ceros (0) and the passed value for instance = 1;
    }
}

Answer 1

is有两个主要用途。

1. 解决in-DOM模板中的限制。
2. 动态组件。

有关更多信息，请参见https://vuejs.org/v2/api/#is。

我们可以忽略前一种情况，因为这与这里无关。

第二种情况通常看起来像这样：

<component :is="childName" />

此处childName是组件的属性，并确定要使用的子组件的名称。在您的示例中，您将其称为create。

模板中使用的实际标签名称并不重要。通常使用虚拟标签<component>来避免误导将来的维护人员，因为他们可能不会立即注意到:is。每当您看到<component>时，您就知道自己处于动态组件场景中。

当我们谈论动态组件时，重要的是要准确地理解在这种情况下“动态”的含义。我们正在专门讨论要使用的组件。我们并不是要首先确定是否要创建组件。

在问题代码中，create的值最初设置为空字符串''。然后将其传递到:is。如果检查DOM，则会发现这将创建一个注释节点。尽管这样做确实有道理，但我不清楚是否得到正式支持。我没有在任何地方看到这种行为的记录，我怀疑您可能因为掉落了用于其他目的的内部代码路径而感到幸运。在将来的Vue版本中，我不会有任何依赖。

感兴趣的特定代码是：

<SeeCompany
  v-bind:is="create"
  v-bind:companyId="1"
/>
<SeeOther
  v-bind:is="create"
  v-bind:companyId="1"
/>

因此，如果您在create为''时检查DOM，则应该找到两个注释节点。

将create设置为SeeCompany时，等效于：

<SeeCompany
  is="SeeCompany"
  v-bind:companyId="1"
/>
<SeeOther
  is="SeeCompany"
  v-bind:companyId="1"
/>

这等效于：

<SeeCompany
  v-bind:companyId="1"
/>
<SeeCompany
  v-bind:companyId="1"
/>

结果是创建两个SeeCompany组件。原始SeeOther标记在这里无关紧要。如前所述，这就是为什么存在使用<component>标记以避免误导的惯例。

当然，这不是您实际希望代码执行的操作。我不清楚目标行为是什么，所以我将介绍一些变体。

如果您只想有条件地显示组件，则可以使用v-if：

<SeeCompany
  v-if="create"
  v-bind:companyId="1"
/>
<SeeOther
  v-if="create"
  v-bind:companyId="1"
/>

通常，您希望create是一个正确的布尔值，false或true。因此，请用false将初始值设置为@click="create = true"。

当然，这将同时显示SeeCompany和SeeOther。那也可能不是您想要的。也许您只想一次显示一个。为此，您可以执行以下操作：

<SeeCompany
  v-if="create === 'SeeCompany'"
  v-bind:companyId="1"
/>
<SeeOther
  v-if="create === 'SeeOther'"
  v-bind:companyId="1"
/>

这里create的初始值应该是某种虚假值，可能是''，并在适当的按钮上加上@click="create = 'SeeCompany'"和@click="create = 'SeeOther'"。

如果组件的道具都相同，尤其是涉及到两个以上的组件，则可以尝试使用is来简化：

<component
  :is="create"
  v-if="create"
  v-bind:companyId="1"
/>

这比较短，但可以说不清楚。