Component
- Component는 상위-하위의 개념을 갖는다.
- 데이터 이동이 자유롭기 때문에 코딩이 쉬움
- 그러나 오류 발생 시 원인을 찾기가 매우 힘듦
=> 규칙의 세우게 됨- 데이터의 흐름은 상위 -> 하위 => props
- 하위에서 상위로 데이터 전송을 하려면? -> 이벤트 사용
<!DOCTYPE html>
<html>
<head>
<title>Component(advanced)</title>
</head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<h1>Component Advanced</h1>
<hr>
<div id="compdiv">
<app-header v-bind:propsdata="num"></app-header>
<app-content v-on:pass="deliverNum"></app-content> <!--pass 라는 이벤트가 발생되면 deliverNum 발생-->
</div>
</body>
<script>
var appHeader = {
template: '<div>header <button v-on:click="dispNum">출력</button></div>',
props: ['propsdata'],
methods:{
dispNum: function(){
console.log(this._props.propsdata);
}
}
}
var appContent={
template: '<div>content <button v-on:click="passNum">전달</button></div>',
methods: {
passNum: function(){
this.$emit('pass',100);
//$emit(event, value): 이벤트 발생 시키는 것, 100 넘기는 값, pass라는 이벤트 발생
}
}
}
var app13 = new Vue({
el: '#compdiv',
components: {
'app-header': appHeader,
'app-content': appContent
},
data: {
num: 50
},
methods:{
deliverNum: function(val){
this.num = val;
console.log(this.num);
}
}
});
</script>
</html>
vue.zip
0.01MB
'자바 공부 > [자바] 기본 공부' 카테고리의 다른 글
| [SPRING] 스프링 프레임워크 기초 (4) | 2024.12.10 |
|---|---|
| [vue.js] 날씨 앱 만들기 (0) | 2024.12.09 |
| [Vue.js] Axios (0) | 2024.12.05 |
| [Vue.js] Vue Router (0) | 2024.12.05 |
| [Vue.js] 섭씨 화씨 계산기 만들기 (0) | 2024.12.04 |