Vue Js에서 재사용 가능한 구성 요소에 대한 변경 가능한 텍스트를 만드는 방법을 모르겠습니다.

Question

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

<div class="tab_header">{{title}}</div>

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

<div class="tab_header">{{title}}</div>

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

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

두 번째는 TabsWrapper

를 담당하는 구성 요소 내부의 코드입니다.

<템플릿>

  <div 클래스="탭">
    <div class="tab_header"></div>
    <ul class="tabs_header">
      <li
      v-for="tabTitles의 제목"
      :key="제목"
      @click="selectedTitle = 제목"
      :class=" {선택됨: 제목 ==선택된 제목}"
      >

        {{ 제목 }}
      </li>
    </ul>
    <슬롯 />
  </div>
</템플릿>
<스크립트>
'vue'에서 { ref} 가져오기;
'vue'에서 { 제공 } 가져오기;
기본값 내보내기{
    설정(소품,{슬롯}){
        const tabTitles=ref(slots.default().map((tab)=> tab.props.title))
        const selectedTitle=ref(tabTitles.value[0])

        제공("selectedTitle", selectedTitle)

        반품{
            선택된제목,
            탭제목,
            
        
        }
    }
}


<p>이 코드는 탭에서 각 제목을 가져옵니다</p>
<pre class="brush:php;toolbar:false;"><탭 제목="탭 1">안녕하세요 1</Tab>

이 코드는 이를 렌더링합니다

<li
      v-for="tabTitles의 제목"
      :key="제목"
      @click="selectedTitle = 제목"
      :class=" {선택됨: 제목 ==선택된 제목}"
      >

        {{ 제목 }}
      
<p>동일한 기술을 반복해 보았는데 효과가 있었지만 더 좋은 방법이 있다고 생각합니다</p>
<p>

<pre class="snippet-code-html lang-html Prettyprint-override"><code> <div class="tabs">
    <div class="tab_header" v-for="headtitle in headTitles" :key="headtitle">{{headtitle}}</div>
    <ul class="tabs_header">
      <li
      v-for="tabTitles의 제목"
      :키="제목"
      @click="selectedTitle = 제목"
      :class=" {선택됨: 제목 ==선택된 제목}"
      >

        {{ 제목 }}
      </li>
    </ul>
    <슬롯 />
  </div>
</템플릿>
<스크립트>
'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)

        반품{
            선택된제목,
            탭제목,
            머리제목,
            
        
        }
    }
}

</script></code>

Answer 1

스크립트 태그에 props를 전달하고 이 키워드와 prop 이름을 사용하여 직접 접근할 수 있습니다.

으아악

이런 템플릿 태그에

으아악

ref를 사용할 필요가 없으며 v-for를 직접 사용하고 배열 요소를 반복할 수 있습니다.

으아악