PROPESS로 HTML 버튼 이름 속성을 전달하는 Vue js

PROPESS로 HTML 버튼 이름 속성을 전달하는 Vue js

HTML 버튼 태그가 포함된 사용자 지정 구성 요소를 만들었기 때문에 이 구성 요소를 여러 번 공유 구성 요소로 상위 구성 요소에 사용하고 있다.HTML 버튼 태그에서 이름 속성을 소품으로 전달하여 동적 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"
/>

코드

네 바이올린 업데이트했다: https://codesandbox.io/s/00yxy5lqzn

내가 바꾼 것들:

토오글.뷔에

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

HTML 특성을 변경하려면v-bind:그 앞에서, 당신은 수염을 사용할 수 없기 때문이다.

앱뷰

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

이중 점 제거 -> 이제 속성의 내용은 문자열로 해석된다.

편집: 이러한 방식으로 수행할 수 있는 대안(결과가 동일함): <toggle :ships="'black'" /><--- 아마도 더 좋은 방법일 것이다.

A를 사용하지 않고 이 작업을 수행할 수 있다.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>

참조URL: https://stackoverflow.com/questions/52518394/vue-js-passing-html-button-name-attribute-as-a-props