[πŸ‘¨πŸ»β€πŸ’»TA9 인턴 4일차]μ»΄ν¬λ„ŒνŠΈ 톡신방법

GoofiΒ·2023λ…„ 7μ›” 20일
0

Vue.js μ»΄ν¬λ„ŒνŠΈ 톡신방법

props속성

μ»΄ν¬λ„ŒνŠΈ κ°„ 데이터λ₯Ό 전달할 수 μžˆλŠ” μ»΄ν¬λ„ŒνŠΈ 톡신 방법이닀.

ν˜•μ‹
μƒμœ„μ»΄ν¬λ„ŒνŠΈ ν…œν”Œλ¦Ώ

<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>

this.num

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)값이 μžˆλ‹€.

profile
μ˜€λŠ˜λ³΄λ‹¨ 내일이 κ°•ν•œ κ°œλ°œμžμž…λ‹ˆλ‹€!!πŸ§‘πŸ»β€πŸ’»

1개의 λŒ“κΈ€

comment-user-thumbnail
2023λ…„ 7μ›” 20일

λ§Žμ€ 도움이 λ˜μ—ˆμŠ΅λ‹ˆλ‹€, κ°μ‚¬ν•©λ‹ˆλ‹€.

λ‹΅κΈ€ 달기