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

【问题标题】：How can I make the placeholder of a button dynamic in Vue?如何在 Vue 中使按钮的占位符动态化？
【发布时间】：2020-03-01 13:06:16
【问题描述】：

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

比如我想实现这个：

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

它基本上替换了项目的占位符。

提前致谢。

【问题讨论】：

标签： vue.js components slots

【解决方案1】：

您可以通过将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>

【讨论】：

我是否也可以使用<slot> 来实现这一点？
更新了我的答案，请注意我使用了一个默认插槽，您也可以使用一个命名的插槽或一个稍微不同的范围插槽，这也是阅读这些内容的好主意。
谢谢！并带有输入字段？在那里你不能使用<option value="">
使用输入字段，您可以设置值，但由于该值是标签上的一个属性，您需要在标签所在的地方执行此操作，即在子组件中，这可以使用道具来完成，但是除非您希望将整个输入作为插槽，否则我想不出使用插槽的方法，在这种情况下，如果自定义组件的大部分是插槽，那么问题是自定义组件的目的是什么？