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>

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

1 个答案: