μ»΄ν¬λνΈ κ° λ°μ΄ν°λ₯Ό μ λ¬ν μ μλ μ»΄ν¬λνΈ ν΅μ λ°©λ²μ΄λ€.
νμ
μμμ»΄ν¬λνΈ ν
νλ¦Ώ
<div id="app">
<app-content v-bind:νλ‘μ€ μμ± λͺ
="μμ μ»΄ν¬λνΈμ data μμ±"></app-content>
</div>
νμ μ»΄ν¬λνΈ λ΄μ©
var appContent = {
props : ['νλ‘μ€ μμ± λͺ
']
}
μ¬μ©λ°©λ² μμ
<div id="app">
<app-content v-bind:propsdata="num"></app-content>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appContent = {
template : '<h1>{{propsdata}}</h1>',
props : ['propsdata']
}
new Vue({
el : "#app",
components : {
'app-content' : appContent
},
data : {
message : 'hi',
num : 10
}
})
</script>
μ»΄ν¬λνΈ ν΅μ λ°©λ² μ€ νμ μ»΄ν¬λνΈμμ μμ μ»΄ν¬λνΈλ‘ ν΅μ νλ λ°©μμ΄λ€.
νμ
μμ μ»΄ν¬λνΈ ν
νλ¦Ώ
<div id="app">
<app-content v-on:μ΄λ²€νΈ λͺ
="μμ μ»΄ν¬λνΈμ μ€νν λ©μλ λͺ
λλ μ°μ°"></app-content>
</div>
νμ μ»΄ν¬λνΈ ν νλ¦Ώ
this.$emit('μ΄λ²€νΈ λͺ
');
μ¬μ©λ°©λ² μμ
κΈ°μ‘΄ κ° 10(num)μ νμ μ»΄ν¬λνΈμμ μ΄λ²€νΈλ₯Ό λ°μμμΌμ μμ μ»΄ν¬λνΈ -1 λ©μλ(decreaseNumber)λ₯Ό μ€ν
<div id="app">
<app-footer v-on:decrease="decreaseNumber"></app-footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var appFooter = {
template : '<button v-on:click="decNumber">dec</button>',
methods : {
decNumber : function(){ //ν¨μλͺ
μΌλ‘ template μ°κ²°
this.$emit('decrease') // μ΄λ²€νΈλͺ
μ§μ
}
}
}
new Vue({
el : '#app',
components : {
'app-footer' : appFooter
},
methods : {
decreaseNumber : function(){
this.num -= 1;
}
}
data : {
num : 10
}
})
</script>
ex1)
var obj = {
num : 10,
getNumber : function(){
console.log(this.num); // κ°μ²΄μμμ μμ±μ κ°λ₯΄ν€κ² λλ€.
}
}
obj.getNumber() //10
ex2)
var vm = new Vue({
el : '#app',
components : {
'app-footer' : appFooter
},
methods : {
decreaseNumber : function(){
this.num -= 1;
}
}
data : {
num : 10
}
})
console.log(vm)
μ νκ² λλ©΄ num(10)κ°μ΄ μλ€.
λ§μ λμμ΄ λμμ΅λλ€, κ°μ¬ν©λλ€.