반응형
반복 콘텐츠 영역에 추가
메뉴 컴포넌트가 있습니다.이 컴포넌트는 간단하게 옵션 배열을 가진 프로펠러를 도입하여 각각의 메뉴에 아이템을 렌더링합니다.사용 사례에 따라 각 메뉴 항목에 있는 마크업을 커스터마이즈 할 수 있도록 하고 싶었기 때문에 메뉴 항목 요소의 플레이스 홀더를 사용했습니다.
이 바이올린에서 예를 볼 수 있습니다.
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
반응형
'programing' 카테고리의 다른 글
VueJS 2 + TypeScript: 계산된 값이 데이터에 의해 정의된 속성을 감지하지 않음 (0) | 2022.08.09 |
---|---|
부울에 따라 nuxt 링크 사용 안 함 (0) | 2022.08.09 |
Java에서는 정적 메서드의 덮어쓰기를 허용하지 않는 이유는 무엇입니까? (0) | 2022.08.09 |
Vuex - 여러 디스패치 후 기능 실행 (0) | 2022.08.09 |
Vue 재료 테이블에서 md-selection 속성을 동적으로 변경하면 테이블 레이아웃이 파괴됩니다. (0) | 2022.08.09 |