※이벤트는 올라가고 데이터(props)는 내려온다
하위 컴포넌트로 데이터(props)내려주기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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:propscontent="num"></app-content>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//컴포넌트의 변수화
var appHeader = {
//html
template: '<h1>{{propsdata}}</h1>',
//mapping id
props:['propsdata']
}
var appContent = {
template : '<div>{{propscontent}}</div>',
props:['propscontent']
}
new Vue({
//Root
el : '#app',
//자식 컴포넌트들
components : {
'app-header' : appHeader,
'app-content' : appContent
},
//데이터들
data : {
message : 'hi',
num : 10
}
})
</script>
</html>상위 컴포넌트로 이벤트(emit)발생시키기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- <app-header v-on:하위컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메소드 이름"></app-header> -->
<app-header v-on:pass="logText"></app-header>
<app-content v-on:add="addNumber"></app-content>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader = {
template: '<button v-on:click="passEvent">click</button>',
methods: {
passEvent: function(){
this.$emit('pass');
}
},
}
var appContent={
template: '<button v-on:click="addNumber">add</button>',
methods:{
addNumber: function(){
this.$emit('add');
}
}
}
new Vue({
el : '#app',
components:{
'app-header' : appHeader,
'app-content' : appContent
},
data:{
num : 1
},
methods:{
logText: function(){
console.log('hi');
},
addNumber: function(){
this.num +=1;
console.log(this.num);
}
}
});
</script>
</html>같은 컴포넌트 레벨간의 통신방법
컴포넌트에서는 데이터를 root로 emit하고, root에서는 props를 통해 데이터를 특정 컴포넌트로 내려준다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<app-header v-bind:propsdata="num"></app-header>
<app-content v-on:pass="deliverNum"></app-content>
</div>
<script>
var appHeader={
template:'<div>값 : {{propsdata}}</div>',
props:['propsdata']
}
var appContent={
template:'<div>content<button v-on:click="passNum">pass</button></div>',
methods: {
passNum: function(){
this.$emit('pass', 10);
}
},
}
new Vue({
el:'#app',
components:{
'app-header' : appHeader,
'app-content' : appContent
},
data:{
num: 0
},
methods:{
deliverNum:function(num){
this.num = num;
}
}
});
</script>
</body>
</html>'정리 > Vue.js' 카테고리의 다른 글
| Vue.js 2와 Vue.js3의 차이 (0) | 2023.09.21 |
|---|---|
| Vue.js 라우터란? (0) | 2023.09.20 |
| Vue.js란? / Vue.js 인스턴스 / Vue.js 컴포넌트 (0) | 2023.09.15 |
| Vue.js 개발환경 파일 (0) | 2023.09.15 |
| Vue.js 새 프로젝트 생성하기 (1) | 2023.09.13 |