๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

emit1

[vue] $emit ์ด๋ฒคํŠธ ๋ฐœ์ƒ๊ณผ ์ˆ˜์‹  (ํ•˜์œ„์—์„œ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ๋กœ ์ด๋ฒคํŠธ ์ „๋‹ฌ) event emit : ์ด๋ฒคํŠธ๋ฅผ ๋ฐœ์ƒ(emit)์‹œ์ผœ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์— ์‹ ํ˜ธ๋ฅผ ๋ณด๋‚ธ๋ฉด ๋œ๋‹ค. ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ํŠน์ • ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๊ธฐ๋ฅผ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ๋‹ค๊ฐ€ ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํŠน์ • ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ•ด๋‹น ์ด๋ฒคํŠธ๋ฅผ ์ˆ˜์‹ ํ•˜์—ฌ ์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ. ์ด๋ฒคํŠธ ๋ฐœ์ƒ๊ณผ ์ˆ˜์‹  ํ˜•์‹ $emit()๊ณผ v-on: ์†์„ฑ์„ ์‚ฌ์šฉํ•˜์—ฌ ๊ตฌํ˜„ $emit()์„ ํ˜ธ์ถœํ•˜๋Š” ์œ„์น˜๋Š” ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ์˜ ํŠน์ • ๋ฉ”์„œ๋“œ ๋‚ด๋ถ€ //์ด๋ฒคํŠธ ๋ฐœ์ƒ this.$emit('์ด๋ฒคํŠธ๋ช…'); //this๋Š” ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๊ฐ€๋ฆฌํ‚ด ํ˜ธ์ถœํ•œ ์ด๋ฒคํŠธ๋Š” ํ•˜์œ„ ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋“ฑ๋กํ•˜๋Š” ํƒœ๊ทธ(์ƒ์œ„ ์ปดํฌ๋„ŒํŠธ์˜ template ์†์„ฑ์— ์œ„์น˜)์—์„œ v-on:์œผ๋กœ ๋ฐ›์Œ. //์ด๋ฒคํŠธ ์ˆ˜์‹  2021. 9. 19.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”