Vue: ๋งž์ถค ์ด๋ฒคํŠธ:<child v-on:child-msg="handleIt"/>

์— ๋งŒ๋“  2016๋…„ 06์›” 18์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: vuejs/vue

Vue.js ๋ฒ„์ „

1.0.25

์žฌ์ƒ์‚ฐ ๋งํฌ

https://jsfiddle.net/oL5qyky9/

์žฌํ˜„ ๋‹จ๊ณ„

๋””์ŠคํŒจ์น˜ ์ด๋ฒคํŠธ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด์„ธ์š”

๋ฌด์—‡์„ ๊ธฐ๋Œ€ํ•ฉ๋‹ˆ๊นŒ?

๊ฒฝ๊ณ ('์ฒ˜๋ฆฌํ–ˆ์Šต๋‹ˆ๋‹ค')

์‹ค์ œ๋กœ ๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์žˆ์Šต๋‹ˆ๊นŒ?

alert('handleIt์ด ์‹คํ–‰๋˜์ง€ ์•Š์•˜์Šต๋‹ˆ๋‹ค');

childMsg ์—์„œ child-msg $๋กœ ๋‹ค์‹œ ๋ณ€๊ฒฝํ•˜๋ฉด ์˜ˆ์ƒ๋Œ€๋กœ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค.

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์˜ˆ์—์„œ child-msg ๋ฅผ childMsg ๋กœ ๋ณ€๊ฒฝํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํ…œํ”Œ๋ฆฟ์—์„œ v-on ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ด๋ฒคํŠธ ์ด๋ฆ„์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์†Œ๋ฌธ์ž๋กœ ๋ฐ”๋€๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ 1.x ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ ๋ถ„์„ ์ œํ•œ ์‚ฌํ•ญ์˜ ์ผ๋ถ€์ด๋ฏ€๋กœ 1.x์˜ ์ด๋ฒคํŠธ ์ด๋ฆ„์— ๋Œ€๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

2.0์—๋Š” ์ด ์ œํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค.

๋ชจ๋“  3 ๋Œ“๊ธ€

๋ถ€๋ชจ์—์„œ 'events obj'๋ฅผ ์ œ๊ฑฐํ•˜๋ฉด ํŠธ๋ฆญ์ด ์ˆ˜ํ–‰๋˜์—ˆ์Šต๋‹ˆ๋‹ค.

https://jsfiddle.net/oL5qyky9/2/

'child-msg' ํ‚ค๊ฐ€ ์žˆ๋Š” ์ด๋ฒคํŠธ obj๊ฐ€ ํ…œํ”Œ๋ฆฟ์—์„œ ๋ฉ”์„œ๋“œ ๋ฐ”์ธ๋”ฉ์„ '๋ฎ์–ด์“ฐ๊ธฐ'ํ–ˆ๋‹ค๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

์˜ˆ์—์„œ child-msg ๋ฅผ childMsg ๋กœ ๋ณ€๊ฒฝํ–ˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ํ…œํ”Œ๋ฆฟ์—์„œ v-on ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ด๋ฒคํŠธ ์ด๋ฆ„์€ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์†Œ๋ฌธ์ž๋กœ ๋ฐ”๋€๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ 1.x ํ…œํ”Œ๋ฆฟ ๊ตฌ๋ฌธ ๋ถ„์„ ์ œํ•œ ์‚ฌํ•ญ์˜ ์ผ๋ถ€์ด๋ฏ€๋กœ 1.x์˜ ์ด๋ฒคํŠธ ์ด๋ฆ„์— ๋Œ€๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ๋งˆ์‹ญ์‹œ์˜ค.

2.0์—๋Š” ์ด ์ œํ•œ์ด ์—†์Šต๋‹ˆ๋‹ค.

์•„, ๋ง์ด ๋˜๋Š”๊ตฐ์š”. ๊ณ ๋งˆ์›Œ ์–˜๋“ค์•„.

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰