- 상위 컴포넌트로 이벤트를 보냄 (v-on:)
ex)appheader -> root 로
클릭 시 발생하는 이벤트 정의 (v-on 뷰에서 제공하는 속성)
v-on:click="메소드 정의"
$emit --> api (기능)
<body>
<div id="app">
<app-header></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader ={
template:'<button v-on:click="passEvent">Click me</button>',
methods:{
passEvent:function(){
this.$emit('pass');
}
}
}
new Vue({
el:'#app',
components:{
'app-header':appHeader
}
});
</script>
</body>
<콘솔 출력하기>
<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header>
<div id="app">
<app-header v-on:하위 컴포넌트에서 발생한 이벤트 이름="상위 컴포넌트의 메서드 이름"></app-header>
</div>
하위 : appheader의 pass
상위 : root 의 logText
<body>
<div id="app">
<app-header v-on:pass="logText"></app-header>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appHeader ={
template:'<button v-on:click="passEvent">Click me</button>',
methods:{
passEvent:function(){
this.$emit('pass'); //하위 컴포넌트에서 발생한 이벤트 이름
}
}
}
new Vue({
el:'#app',
components:{
'app-header':appHeader
},
methods:{
logText:function(){ //상위 컴포넌트의 메서드 이름
console.log('hi');
}
}
});
</script>
</body>
{{ 데이터 }}을 통해 화면 표현 가능
'vue.js' 카테고리의 다른 글
| 같은 컴포넌트 레벨간의 통신 (0) | 2023.01.11 |
|---|---|
| 뷰 인스턴스에서의 this (0) | 2023.01.11 |
| 컴포넌트 통신 - props (0) | 2023.01.10 |
| 컴포넌트 (0) | 2023.01.10 |
| 뷰 인스턴스 (0) | 2023.01.10 |
