在 Vue.js 中的每个组件中放置一个插槽

Question

我有一个名为 vue-select 的组件，它是我安装的第三方包。我想在此组件的每个实例中放置一个插槽模板。我的意思是我想做这样的事情：

<v-select>
 <span slot="no-options">
   <li>sample text</li>
 </span>
</v-select>

而且我不想在我的项目中的每个 v-select 中都这样做。我该怎么做才能干掉我的代码？谢谢 :)

Answer 1

当您想要使组件模板的某些部分不同时，该插槽很有用。如果你总是希望它是同一块模板，那么就不要把它做成插槽。只需将您想要的标记添加到组件的模板中即可。

这类似于如果您不想更改某些内容，则不要将其作为函数的参数。

function spin (element) {
  const angle = 360
}

如果你想让一个选项有一些共同的内容，但有时仍然会改变它，将默认内容放在组件模板的<slot>标签中。

这类似于在函数中添加默认参数：

function spin (element, angle = 360) { }

如果您已经有一个第三方组件，其中定义了插槽及其默认内容，因此您无法更改它们，请先将它们包装在不同的组件中，然后在其余代码中使用包装器组件。

这类似于添加调用前一个函数的新函数，但硬编码了一些参数。

function halfSpin (element) {
  spin(element, 180)
}

Put a slot in every component in Vue.js