Vue.js 슬롯 속성 사용 방법

Vue.js 슬롯 속성 사용 방법

슬롯에 속성을 설정할 수 있으며 부모로부터 요소가 이러한 속성을 얻을 수 있습니까?

부모

<vDropdown>
  <button slot="button">new button</button>
  <ul>content</ul>
</vDropdown>

드롭다운.표시하다

<div>
  <slot name="button" aria-haspopup="true">
    //fallback
    <button aria-haspopup="true">Default Button</button>
  </slot>
  <div id="name" :aria-expanded="expanded">
    <slot />
  </div>
</div>

버튼의 출력에는 속성이 없습니다.

<div>
  <button>new button</button>
  <div id="myDropdown" aria-expanded="false">
    <ul>content</ul>
  </div>
</div>

범위 지정 슬롯 사용

스텝 1. 부모에서 사용되지 않는 오래된 슬롯타깃 구문을 갱신합니다.slot="button"에게v-slot지시:

_Parent.vue

...
<template v-slot:button>                   ✅
  <button>new button</button>
</template>
...

<button slot="button">new button</button>  ❌

^{Vue 2.6.0+에서 슬롯을 타깃으로 하는 방법}

스텝 2. 다음으로, 에 추가하는 Atribute Binding은<slot>태그는, 거기에 배치되어 있는 모든 슬롯 컨텐츠에 사용할 수 있게 됩니다(이것을 「소품」이라고 부릅니다).

_{드롭다운.표시하다}

<slot name="button" :aria-haspopup="true">

스텝 3. Vue는 스텝2의 모든 바인딩을 포함하는 오브젝트를 자동으로 생성하여 그 바인딩을v-slot표현, 즉,slotProps아래. 그러면 스페셜을 사용할 수 있습니다.v-bind=""구문을 사용하여 모든 바인딩을 버튼에 펼칩니다.

_{Parent.vue 갱신}

<template v-slot:button="slotProps">
  <button v-bind="slotProps">new button</button>
</template>

여기 데모입니다만, Kebab-case 속성으로 이 작업을 수행하려면 두 개의 하이픈을 사용하여 해킹해야 합니다.Vue Git Hub repo에서 이 문제를 제출할 예정입니다.

Vue.component('dropdown', {
  template: `
  <div>
    <slot name="button" aria--haspopup="true">
      <button aria-haspopup="true">Default Button</button>
    </slot>
    <div id="name" :aria-expanded="expanded">
      <slot />
    </div>
  </div>`,
  data() {
    return {
      expanded: true
    }
  }
});

new Vue({
  el: "#app",
});

.aria-haspopup {
  background: orange;
}

<div id="app">
  <dropdown>
    <template v-slot:button="slotProps">
      <button v-bind="slotProps">new button</button>
    </template>
    <ul>content</ul>
  </dropdown>
</div>

<script src="https://unpkg.com/vue"></script>

언급URL : https://stackoverflow.com/questions/66193486/vue-js-how-to-use-attributes-on-slots