컴포넌트

1. 문제 이해하기

<section id="app">
  <ul>
    <li v-for="friend in friends" :key="friend.id">
      <h2>{{friend.name}}</h2>
      <button @click="toggleDetails">{{detailsAreVisible ? 'Hide' : 'Show'}} Details</button>
      <ul v-if="detailsAreVisible">
        <li><strong>Phone:</strong>{{friend.phone}}</li>
        <li><strong>Email:</strong> {{friend.email}}</li>
      </ul>
    </li>
  </ul>
</section>

const app = Vue.createApp({
  data() {
    return {
      friends: [
        {id: 'manuel', name: 'Manuel Lorenz', phone: '010-4702-5291', email:'0seo8@naver.com'},
        {id: 'julie', name: 'Julie Jones', phone: '010-5222-0100', email:'julie@naver.com'},
      ],
      detailsAreVisible: false
    }
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible
    }
  },
})

app.mount('#app')

위 코드의 경우 details버튼을 클릭했을 때 개개인의 detial페이지가 열리는 것이 아닌 모든 회원의 details페이지가 열린다는 문제가 있습니다.

2. 컴포넌트화

<header>
  <h1>FriendList</h1>
</header>
<section id="app">
  <ul>
    <friend-contact></friend-contact>
    <friend-contact></friend-contact>
  </ul>
</section>

const app = Vue.createApp({
  data() {
    return {
      friends: [
        {id: 'julie', name: 'Julie Jones', phone: '010-5222-0100', email:'julie@naver.com'},
        {id: 'julie', name: 'Julie Jones', phone: '010-5222-0100', email:'julie@naver.com'},
      ]
    }
  },
})

//항상 -가 포함된 이름을 사용해야합니다.
app.component('friend-contact', {
  template:`
  <li>
    <h2>{{friend.name}}</h2>
    <button @click="toggleDetails">{{detailsAreVisible ? 'Hide' : 'Show'}} Details</button>
    <ul v-if="detailsAreVisible">
      <li><strong>Phone:</strong>{{friend.phone}}</li>
      <li><strong>Email:</strong> {{friend.email}}</li>
    </ul>
  </li>
  `, 
  data() {
    return {
      detailsAreVisible: false,
      friend: {
        id: 'manuel', 
        name: 'Manuel Lorenz',
        phone: '010-4702-5291', 
        email:'0seo8@naver.com'
      },

    }
  },
  methods: {
    toggleDetails() {
      this.detailsAreVisible = !this.detailsAreVisible
    }
  }
})

app.mount('#app')

3. 여러 vue app vs 여러 구성요소

Vue.js를 사용하여 (여러 HTML) 페이지의 일부 를 제어 하거나 이를 사용하여 소위 " 단일 페이지 애플리케이션 "( SPA )을 구축할 수 있습니다.

HTML 페이지의 여러 독립적인 부분을 제어하는 경우 여러 Vue 앱createApp() 으로 작업하는 경우가 많습니다(즉, 두 번 이상 호출하여 여러 앱을 생성 함).

반면에 SPA를 구축하는 경우 일반적으로 하나의 "루트 앱" 으로 작업하고 (즉 createApp(), 전체 코드베이스에서 한 번만 사용됨) 대신 여러 구성 요소로 사용자 인터페이스를 구축합니다 .

여러 Vue 앱이 있는 경우에도 구성 요소를 사용할 수 있지만 일반적으로 연결된 하나의 큰 사용자 인터페이스를 구축하는 경우 여러 Vue 앱을 사용하지 않습니다.

왜요?

Vue 앱은 서로 독립적 이기 때문에 실제로 서로 통신 할 수 없습니다 . 작동하도록 "해킹"을 찾을 수 있지만 앱 간에 데이터를 공유하고 앱 B에서 문제가 발생할 경우 앱 A에서 업데이트하는 훌륭한 "공식적인" 방법이 없습니다.

반면 구성요소 는 구성요소 간에 데이터를 교환할 수 있는 특정 통신 메커니즘을 제공 합니다. 따라서 여러 구성 요소를 포함하는 하나의 루트 앱으로 작업하는 경우 연결된 하나의 UI를 구축할 수 있습니다.