Vue js передает атрибут имени кнопки HTML как PROPS - PullRequest
Новая
       47

Vue js передает атрибут имени кнопки HTML как PROPS

0 голосов
/ 26 сентября 2018

Я создал пользовательский компонент, который содержит тег кнопки HTML, поэтому я использую этот компонент много раз в качестве общего компонента в родительском компоненте.Я хотел бы знать, могу ли я передать атрибут name из тега кнопки HTML в качестве реквизита, чтобы иметь динамический тег кнопки 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"
/>

КОД

Ответы [ 2 ]

0 голосов
/ 26 сентября 2018

Вы можете сделать это, не используя 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>
0 голосов
/ 26 сентября 2018

Я обновил вашу скрипку: 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'" /> <- это, вероятно, лучший способ </p>

...