🎈 이 기사는 WP 전용입니다
htps //wp. 메 / pc9 HC-fu

전치

이번은 component①에서 해설했다
자체 제작 구성 요소를 동적으로 변경할 수 있습니다.
component 태그에 대한 해설입니다 ✨🙋‍♀️

⬇️ 공식 가이드는 이쪽
https://kr.vuejs.org/v2/guide/components.html#동적 구성 요소
htps : // jp. 아 js. rg/v2/구이데/코 m포넨 ts-dy nami c-a syn c. HTML

버튼으로 표시
구성 요소를 전환하고 있습니다 🌟👀
조건부 캐시 저장도 해요 🙋‍♀️

비동기 컴포넌트는
Nuxt라면 asyncData를 사용할 수 있기 때문에
그쪽을 봐주세요 👀

【Nuxt.js】Nuxt 문법편:asyncData

그냥 asyncData는
페이지 구성 요소에서만 사용할 수 있기 때문에
일반 컴포넌트에서 사용한다면
이쪽을 참고로 하면 좋을까 생각합니다🍎🙋‍♀️
htps : // 코 m/히로유키 wk/있어 ms/b83f52에 6d899b06506cb

쉬운 사용법

component v-bind:is
동적으로 여러 구성 요소
전환할 수 있습니다 🌟

전환할 때마다
새 인스턴스가 생성됩니다.
캐시가 지워집니다 🌪
지워지지 않도록 하려면
component 태그
keep-alive 태그로 둘러싸지만,
우선 간단한 사용법을 이해합시다 💡

전환 할 수 있다는 것을 알면 좋기 때문에
컴퍼넌트명은 안직하게 명명하고 있습니다.

❓ 캐시
저장하는 메커니즘입니다 💾
캐시 지우기
= 저장할 수 없는 상태입니다 🌪
Input1에 입력한 문자가
다른 구성 요소를 표시하면
사라졌습니다 🍃

코드

index.vue

<template>
 <div class="page">
   <button @click="changeComponent = 'Input1'">Input1</button>
   <button @click="changeComponent = 'Input2'">Input2</button>
   <button @click="changeComponent = 'Input3'">Input3</button>
   <component
     v-bind:is="changeComponent"
     class="box"
    >
     ここにコンポーネントが表示されます
    </component>
 </div>
</template>

<script>
import Input1 from '~/components/Input1.vue'
import Input2 from '~/components/Input2.vue'
import Input3 from '~/components/Input3.vue'

export default {
 data () {
   return {
     changeComponent: 'Input1',
   }
 },
 components: {
   Input1,
   Input2,
   Input3,
 },
}
</script>

<style lang="scss" scoped>
 .page {
   .box  {
     border: 1px solid orange;
   }
 }
</style>

【Input1.vue】
숫자만 바꾼 input의 컴퍼넌트를
세 가지를 만들고 있습니다.

Input.vue

<template>
 <div class="input1">
   <p>Input1</p>
   <input type="text">
 </div>
</template>

값 전달

props 등도 사용할 수 있습니다⭕🙆‍♀️
입력으로하면 까다 롭기 때문에
그냥 텍스트를 props로 전달해 보겠습니다.
이미지 Input1의
「부모로부터 텍스트를 건네준다」의 부분입니다.

🎈 자세한 내용은 WP에서 확인하세요 👀
htps //wp. 메 / pc9 HC-fu