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

Question

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

  <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:，因为那里不能使用小胡子。

App.vue

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

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

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

Answer 2

您可以在不使用 prop 的情况下使用 inheritAttrs。

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

Vue js passing HTML button name attribute as a PROPS

vue.js

vue-router

vue-component

vuex

vuejs2