如何在 Vue 中使按钮的占位符动态化？

Question

此刻，我有一个组件，它是整个应用程序中使用的选择框的组件。我想动态设置占位符，这样你就可以在任何你想要的地方使用按钮，我知道你可以用 Vue Slots 做到这一点，但我不知道如何:

比如我要实现这个：

<SDSelectBox>Amount of Items</SDSelectBox> 和另一个用例 <SDSelectBox>How many items do you want?</SDSelectBox>

基本上取代了项目的占位符。

提前致谢。

Answer 1

您可以通过将 prop 传递给您的组件然后将占位符设置为 prop 的值来使占位符动态化。
像这样：

<SDSelectBox :placeHolder="someValueFromCurrentComponent"></SDSelectBox>
//Inside the SDSelectBox
<template>
  <select>
   <option value="" disabled selected>{{placeholder}}</option>
...
props: ['placeHolder'],

或者使用插槽，您可以简单地插入 SDSelectBox：

<select>
 <slot></slot>
...
//parent component
<SDSelectBox>
 <option value="" disabled selected>{{placeholder}}</option>
</SDSelectBox>

如何在 Vue 中使按钮的占位符动态化？

How can I make the placeholder of a button dynamic in Vue?

components

slots

vue.js