vue.js - Vue js 将 HTML 按钮名称属性作为 PROPS 传递

Question

我创建了一个包含 HTML 按钮标记的自定义组件，因此我多次使用此组件作为父组件的共享组件。我想知道我是否可以将 HTML 按钮标签中的 name 属性作为 Prop 传递，这样我就可以拥有一个动态的 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

我已经更新了你的 fiddle :https://codesandbox.io/s/00yxy5lqzn

我改变的事情:

Toogle.vue

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

要更改 HTML 属性，只需添加 v-bind:在它前面，因为你不能在那里使用 mustache 。

App.vue

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

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

编辑:您也可以这样做(结果相同):<toggle :ships="'black'" /> <-- 这可能是更好的方法