Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- simulation
- floyd washall
- programming
- implementaion
- DFS
- 백준
- algorithm
- Python
- Vue.js
- 출처:장기효vue.js
- 1012
- 코테
- javascript
- greedy
Archives
- Today
- Total
DevDave
같은 컴포넌트 레벨 간의 통신 방법 본문
<!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">{{str}}
// v-bind:
<app-header v-bind:propsdata ="num"></app-header>
// v-on: 하위컴포넌트에서 발생한 event이름
<app-content v-on:pass="deliverNum"></app-content>
</div>
//appComponent에서 appHeader로 데이터 보내는 실습
<script>
//root 아래 component
var appHeader = {
template: '<div>header</div>',
props: ['propsdata']
}
//root 아래 component
var appContent = {
// 클릭하면 passNum이라는 메서드 실행
template: '<div>content<button v-on:click="passNum">pass</button></div>'
,methods:{
passNum: function(){
//emit으로 event 수행
this.$emit('pass',10);
}
}
}
//root Component
new Vue({
el: '#app'
,components:{
'app-header': appHeader
,'app-content' : appContent
},
data:{
num: 0
},
methods:{
deliverNum: function(value){
this.num = value;
}
}
})
</script>
</body>
</html>
'Vue.js' 카테고리의 다른 글
| Vue Router (0) | 2023.08.24 |
|---|---|
| COMPONENT, PROPS, EVENT,this (0) | 2023.07.14 |
| Object.defineProperty() (0) | 2023.07.13 |
| IIFE(즉시 실행함수) (0) | 2023.07.13 |
| 다시 (0) | 2023.07.13 |