如何在Vue中动态设置按钮的占位符？

Question

目前，我有一个组件，它是用于整个应用程序的Selectbox的组件。我想动态设置占位符，以便您可以在任意位置使用按钮，而且我知道您可以通过Vue插槽来执行此操作，但是我不知道如何：

例如，我要实现这一目标：

<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>