Component(advanced)
Component는 상위-하위의 개념을 갖는다.
데이터 이동이 자유롭기 때문에 코딩이 쉬운 반면,
오류 발생 시 원인을 찾기가 매우 힘듬
=> 규칙을 세우게 됨
데이터의 흐름은 상위 -> 하위 => props
하위에서 상위로 데이터 전송을 하려면? -> 이벤트 사용
☆ Code
<!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>
</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);
}
}
}
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' 카테고리의 다른 글
| Vue.js axios (1) | 2025.01.17 |
|---|---|
| Vue.js router (0) | 2025.01.16 |
| Vue.js trans (0) | 2025.01.15 |
| Vue.js form (0) | 2025.01.14 |
| Vue.js class (0) | 2025.01.13 |