programing

반복 콘텐츠 영역에 추가

bestcode 2022. 8. 9. 21:44
반응형

반복 콘텐츠 영역에 추가

메뉴 컴포넌트가 있습니다.이 컴포넌트는 간단하게 옵션 배열을 가진 프로펠러를 도입하여 각각의 메뉴에 아이템을 렌더링합니다.사용 사례에 따라 각 메뉴 항목에 있는 마크업을 커스터마이즈 할 수 있도록 하고 싶었기 때문에 메뉴 항목 요소의 플레이스 홀더를 사용했습니다.

바이올린에서 예를 볼 수 있습니다.

const Menu = {
    template: `
        <ul>
            <li v-for="item in options" :class="item.colour">
            <slot></slot>
            <span class="label">{{item.name}}</span>
          </li>
        </ul>
    `,
    data: () => {
        return {
            options: [
                { name: 'one', colour: 'red' },
                { name: 'two', colour: 'green' },
                { name: 'three', colour: 'blue' },
                { name: 'four', colour: 'yellow' }
            ]
       };
    }
};


const app = new Vue({
    components: {
        custommenu: Menu,
      },
    template: `<custommenu><span class="colour"></span></custommenu>`
});

app.$mount('#app');

이것은 Vue의 v1에서 정상적으로 동작했습니다.그러나 JS를 v2로 업그레이드한 후 "Duplicate presence of slot "default"라는 오류가 동일한 렌더 트리에 표시되므로 렌더 오류가 발생할 수 있습니다."

이것은 v2에서 가능한 것입니까, 아니면 같은 것을 실현하는 다른 방법이 있습니까?

경우 스코프 슬롯이 필요할 것 같기 때문에, 이 슬롯을slot템플릿의 내용scope속성:

<custommenu>
  <template scope="colour">
    <span class="colour"></span>
  </template>
</custommenu>

그런 다음 컴포넌트 템플릿의 슬롯에 추가해야 합니다.

<ul>
  <li v-for="item in options" :class="item.colour">
    <slot colour></slot>
    <span class="label">{{item.name}}</span>
  </li>
</ul>

업데이트된 JSFiddle: https://jsfiddle.net/kLge4wun/

언급URL : https://stackoverflow.com/questions/41850021/adding-slot-in-repeating-content-region

반응형