반응형
<전역, 지역 컴포넌트>
전역 컴포넌트 -> componet
지역 컴포넌트 -> componets (s 붙음). 서비스를 구현할때 필요한 로직이 여러개이기 때문에
차이점
전역: 플러그인, 라이브러리 같은 전역으로 사용해야 하는 것들만 이걸로 사용
지역: 하단에 어떤게 등록되는지 알수있다.
<컴포넌트와 인스턴스의 관계>
인스턴스를 생성하면 루트 컴포넌트가 된다
전역 컴포넌트는 인스턴스를 생성할때마다 기본적으로 등록 되어있음
실제 실무에서 서비스할땐
인스턴스 하나를 붙이고 그 안에 컴포넌트를 붙이는 식으로 진행한다
전역
인스턴스를 생성할때마다 컴포넌트에 등록할 필요 없다
지역
인스턴스를 생성할때마다 컴포넌트를 등록해줘야 하는게 지역 컴포넌트
지역 컴포넌트는 인스턴스마다 새로 생성해야함
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<app-header></app-header>
<app-footer></app-footer>
</div>
<div id="app2">
<app-header></app-header>
<app-footer></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//전역 컴포넌트
// Vue.component('컴포넌트 이름', {컴포넌트 내용});
//실무에선 대부분 플러그인, 라이브러리 같은 전역으로 사용해야 하는것들만 이걸로
Vue.component('app-header', {
template: '<h1>header</h1>'
});
new Vue({
el: '#app',
//지역 컴포넌트 등록 방식
//component 가 아니라 components 라고 s가 붙음
//여러개가 들어가는 속성에는 다 s가 붙는다.
//서비스를 구현할땐 대부분 이것 사용
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer':{
template: '<footer>footer</footer>'
}
}
});
new Vue({
el: '#app2',
components: {
// '컴포넌트 이름': 컴포넌트 내용,
'app-footer': {
template: '<footer>footer</footer>'
}
}
})
</script>
</body>
</html><컴포넌트 통신 방식>
뷰 컴포넌트는 각각 고유한 데이터 유효 범위를 갖습니다.
따라서, 컴포넌트 간에 데이터를 주고 받으려면 규칙을 따라야 합니다.
상위에서 하위로는 데이터를 내려줌, 프롭스 속성
하위에서 상위로는 이벤트를 올려줌, 이벤트 발생
MVVM 데이터 통신 방식은 데이터의 흐름이 아래로만 내려간다.
그래서 데이터를 추적할 수 있다. (MVC의 n방향 통신의 문제점 고침)
아래로는 데이터가 내려가고 (props)
아래서 위로 올라갈땐 이벤트가 발생한다.
<Props 속성>
props 문법
<app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header>
<app-header v-bind:propsdata="message"></app-header>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <app-header v-bind:프롭스 속성 이름="상위 컴포넌트의 데이터 이름"></app-header> -->
<app-header v-bind:propsdata="message"></app-header>
<app-content v-bind:content="num"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//컴포넌트 통신 방법1
//가독성을 위해 변수에 저장
var appHeader = { //카멜케이스 변수이름 짓기 방법.
template: '<h1>{{propsdata}}</h1>',
props: ['propsdata']
}
var appContent = {
template : '<div>{{content}}</div>',
props: ['content']
}
new Vue({
el: '#app',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: { //root컴포넌트에서 관리하는 data
message: 'hi props',
num: 10
}
})
//컴포넌트 통신 방법2
//이렇게 하면 가독성에 안좋기 때문에 방법1 권장
// new Vue({
// el: '#app',
// components: {
// 'app-header': {
// template: '<h1>{{propsdata}}</h1>'
// }
// },
// data: { //root컴포넌트에서 관리하는 data
// message: 'hi props'
// }
// })
</script>
</body>
</html>반응형
'vue.js > vue.js 2' 카테고리의 다른 글
| 11. 라우터가 표시되는 영역 및 <router-view> 태그 (0) | 2022.07.09 |
|---|---|
| 9. 뷰 라우터 소개와 설치 (0) | 2022.07.09 |
| 5. 인스턴스 옵션과 속성 | 인스턴스와 컴포넌트 | 뷰 컴포넌트란? (0) | 2022.07.05 |
| 4. Vue.js와 vue개발자 도구 | 인스턴스 | 생성자함수 (0) | 2022.07.04 |
| 3. Reactivity 코드 라이브러리화 하기 | 즉시실행함수 (0) | 2022.07.04 |