튜토리얼을 보면서 재사용 가능한 탭 구성 요소를 만들고 있습니다. 그것을 본 후에 나는 그것이 어떻게 작동하는지 이해했습니다. 하지만 내 프로젝트에서는 재사용 가능한 구성 요소이므로 변경할 수 있는 제목이 있는 탭을 만들어야 하므로 새 탭마다 제목을 변경해야 하지만 아직 파악하지 못했습니다. 방법을 알아보세요. 페이지에 추가한 TabsWrapper 구성 요소에서 제목을 가져와야 합니다

{{title}}

그런 다음 이 헤더가 TabsWrapper 구성 요소의 기본 헤더인 이 div 내부의 텍스트를 변경하도록 합니다.

{{title}}

내 코드: 첫 번째는 웹사이트 홈 페이지에 추가한 구성요소 외부 코드입니다.

 <탭 제목="탭 1">안녕하세요 1 <탭 제목="탭 2">안녕하세요 2 <탭 제목="탭 3">안녕하세요 3 <탭 제목="탭 4">안녕하세요 4 

두 번째는 TabsWrapper

<템플릿> 
 
 
 
 {{ 제목 }} 
 
 <슬롯 /> 
  <스크립트> 'vue'에서 { ref} 가져오기; 'vue'에서 { 제공 } 가져오기; 기본값 내보내기{ 설정(소품,{슬롯}){ const tabTitles=ref(slots.default().map((tab)=> tab.props.title)) const selectedTitle=ref(tabTitles.value[0]) 제공("selectedTitle", selectedTitle) 반품{ 선택된제목, 탭제목, } } }
이 코드는 탭에서 각 제목을 가져옵니다
 
<탭 제목="탭 1">안녕하세요 1
 
이 코드는 이를 렌더링합니다
 
 {{ 제목 }}
동일한 기술을 반복해 보았는데 효과가 있었지만 더 좋은 방법이 있다고 생각합니다
 
 
 
 
{{headtitle}}
 
 
 {{ 제목 }} 
 
 <슬롯 /> 
  <스크립트> 'vue'에서 { ref} 가져오기; 'vue'에서 { 제공 } 가져오기; 기본값 내보내기{ 설정(소품,{슬롯}){ const tabTitles=ref(slots.default().map((tab)=> tab.props.title)) const headTitles=ref(slots.default().map((tab)=>tab.props.headtitle)) const selectedTitle=ref(tabTitles.value[0]) 제공("selectedTitle", selectedTitle) 반품{ 선택된제목, 탭제목, 머리제목, } } }