Vue_3

컴포넌트

• 컴포넌트는 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움이 됨.

  경우에 따라 특별한 is 속성으로 확장된 원시 HTML 엘리먼트로 나타낼수도 있음.

• Vue 컴포넌트는 Vue 인스턴스이기도 해서 모든 옵션 객체를 사용 가능함.(같은 라이프 사이클 훅 사용가능)

컴포넌트 전역 등록

• Vue.component(tagName, options) 를 사용

Vue.component('my-component',{
  // 옵션
})

• 사용자 지정 태그 이름에 대한 규칙
  • 모두 소문자이어야 하고, 하이픈을 포함해야함.

<div id="example">
  <my-component></my-component> 
<div>

//등록
Vue.component('my-component',{
  template : '<div>사용자 정의 컴포넌트</div>'
})
// 루트 인스턴스 생성
new Vue({
    el: '#example'
})

• template 속성은 컴포넌트가 출력할 HTML 코드를 입력하는곳

컴포넌트 지역 등록

• components 인스턴스 옵션으로 다른 인스턴스/컴포넌트 범위에서만 사용 가능한 컴포넌트를 만들수 있음.

var newChild ={
    template : '<div></div>',
    data(){
        return {
            title : "Hi"
        }
    }
}

new Vue({
    el:"#example",
    components :{
        'my-component' : newChild
    }
})

• 동일한 캡슐화는 디렉티브와 같은 다른 등록 가능한 Vue 기능에도 적용됨.
• 컴포넌트에서 data 사용 시 data는 함수로 작성 해야함.
  • data() 가 return 하는 객체가 기존에 우리가 사용하던 data 와 동일한 역할을 함.

Vue.component('hello',{
    template : '<h1> <button @click="changeTitle"> return title </button></h1>',
    data(){
        return{
            title:'hi'
        }
    },
    methods: {
        changeTitle(){
            this.title = '변경 타이틀'
        }
    },
})

new Vue({
    el:"#app"
})
  <div id="app">
      <hello></hello>
      <hello></hello>
      <hello></hello>
  <div>

• 하나의 컴포넌트를 다수로 사용 시 각자의 위치에서 각자의 역할을 독립적으로 수행함.