Question

我创建了一个包含HTML按钮标签的自定义组件，因此我多次将此组件用作父组件的共享组件。我想知道是否可以通过HTML按钮标签的 name 属性作为道具，以便我可以动态地使用HTML按钮标签的 name 属性。

  <div class="toggle">
    <button
      class="btn"
      name="ships">
  </div>

<script>
export default {
  props: {
    ships: {
      type: String,
      required: true,
      default: ''
    }
  }
</script>


 <toggle
    :ships="white"
/>


 <toggle
    :ships="grey"
/>

 <toggle
    :ships="black"
/>

CODE

Answer 1

我已经更新了您的小提琴：https://codesandbox.io/s/00yxy5lqzn

我已更改的内容：

Toogle.vue

<button class="btn" v-bind:name="ships">BUTTON </button>

要更改HTML属性，只需在其前面添加一个v-bind:，因为您不能在此处使用胡须。

App.vue

<div id="app">
  <toggle ships="black" />
  <toggle ships="grey" />
  <toggle ships="white"/>
</div>

删除了双点->现在，属性的内容将解释为字符串。

编辑：您也可以这样操作（结果相同）：<toggle :ships="'black'" /> <-可能是更好的方法

Answer 2

您可以不使用inheritAttrs来使用prop。

export default {
    inheritAttrs: false,
    name: "toggle",
};

然后使用$attrs访问任何fallthrough属性，例如name。

<div class="toggle">
    <button class="btn"
    v-bind:name="$attrs.name">BUTTON </button>
</div>

然后使用您的组件

<div id="app">
    <toggle name="black" />
    <toggle name="grey" />
    <toggle name="white"/>
</div>

Vue JS将HTML按钮名称属性作为PROPS传递

2 个答案: