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

Posted 2023-02-23

【中文标题】Vue js将HTML按钮名称属性作为PROPS传递

【英文标题】：Vue js passing HTML button name attribute as a PROPS

【发布时间】：2019-03-02 06:30:17

【问题描述】：

我创建了一个包含 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

【问题讨论】：

您有可以共享的 JSFiddle 设置吗？我们可以对其进行编辑以帮助您。

@David.J 只是更新代码

【参考方案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'" />

【讨论】：

完美运行！谢谢！

【参考方案2】：

您可以在不使用prop 的情况下使用inheritAttrs 来执行此操作。

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

然后使用$attrs 访问任何失败属性，例如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>

【讨论】：

在您的切换组件定义中。

好的，我明白了。是的，它也有效，可能它是用于 HTML 属性而不是道具的更优雅的解决方案

是的，当我有一个元素包装我想要应用我的属性的实际元素时，我会使用它。