Vue Component
Component๋ ์กฐํฉํ์ฌ ํ๋ฉด์ ๊ตฌ์ฑํ ์ ์๋ ๋ธ๋ก์ ์๋ฏธํ๋ค.

์ผ์ชฝ ๊ทธ๋ฆผ์ ๊ฐ ์์ญ์ ์ปดํฌ๋ํธ๋ก ์ง์ ํ์ฌ ๊ตฌ๋ถํ ๊ฒ์ด๊ณ , ์ค๋ฅธ์ชฝ ๊ทธ๋ฆผ์ ๊ฐ ์ปดํฌ๋ํธ ๊ฐ์ ๊ด๊ณ๋ฅผ ๋ํ๋ธ ๊ฒ์ด๋ค. ์ด๋ฌํ ์ปดํฌ๋ํธ ๊ฐ์ ๊ด๊ณ๋ ๋ทฐ์์ ํ๋ฉด์ ๊ตฌ์ฑํ๋ ๋ฐ ๋งค์ฐ ์ค์ํ ์ญํ ์ ํ๋ฉฐ, ์น ํ์ด์ง ํ๋ฉด์ ์ค๊ณํ ๋๋ ์ด์ ๊ฐ์ ๊ณจ๊ฒฉ์ ์ ์งํ๋ฉด์ ์ค๊ณํด์ผํ๋ค. ์ปดํฌ๋ํธ ๊ธฐ๋ฐ ๋ฐฉ์์ผ๋ก ๊ฐ๋ฐํ๋ ์ด์ ๋ ์ฝ๋ ์ฌ์ฌ์ฉ์ด ์ฝ๊ธฐ ๋๋ฌธ์ด๋ค. ๊ทธ๋ฆฌ๊ณ ๋ทฐ์ ๊ฒฝ์ฐ์๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํด HTML ์ฝ๋์์ ํ๋ฉด์ ์ง๊ด์ ์ผ๋ก ํ์ ํ ์ ์๋ค. ์ฆ, ํ๋ ์์ํฌ ์์ฒด์์ ์ปดํฌ๋ํธ ๋ฐฉ์์ ์ถ๊ตฌํ๋ฉด ๋ชจ๋๊ฐ ์ ํด์ง ๋ฐฉ์์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ํ์ฉํ๋ฏ๋ก ๋น ๋ฅด๊ฒ ๊ตฌํํ ์ ์์ผ๋ฉฐ, ๋ค๋ฅธ ์ฌ๋์ ์ฝ๋๋ฅผ ๋ณด๋ ๊ฒ๋ ์์ํด์ง๋ค.
์ปดํฌ๋ํธ ๋ฑ๋กํ๊ธฐ
์ง์ญ(local) ์ปดํฌ๋ํธ๋ ํน์ ์ธ์คํด์ค์์๋ง ์ ํจํ ๋ฒ์๋ฅผ ๊ฐ๊ณ , ์ ์ญ(global) ์ปดํฌ๋ํธ๋ ์ฌ๋ฌ ์ธ์คํด์ค์์ ๊ณตํต์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
์ ์ญ ์ปดํฌ๋ํธ
์ ์ญ ์ปดํฌ๋ํธ๋ ๋ทฐ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ๋ก๋ฉํ๊ณ ๋๋ฉด ์ ๊ทผ ๊ฐ๋ฅํ Vue ๋ณ์๋ฅผ ์ด์ฉํด ๋ฑ๋กํ๋ค.
Vue.component('์ปดํฌ๋ํธ๋ช
',{
// ์ปดํฌ๋ํธ ๋ด์ฉ
});
์ปดํฌ๋ํธ๋ช : template ์์ฑ์์ ์ฌ์ฉํ HTML ์ฌ์ฉ์ ์ ์ ํ๊ทธ ์ด๋ฆ์ ์๋ฏธ
์ปดํฌ๋ํธ ๋ด์ฉ : ์ปดํฌ๋ํธ ํ๊ทธ๊ฐ ์ค์ ํ๋ฉด์ HTML ์์๋ก ๋ณํ๋ ๋ ํ์๋ ์์ฑ๋ค์ ์์ฑ
template, data, methods ๋ฑ ์ธ์คํด์ค ์ต์ ์์ฑ์ ์ ์ํ ์ ์๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<button>์ปดํฌ๋ํธ ๋ฑ๋ก</button>
<my-component></my-component> <!--์ ์ญ ์ปดํฌ๋ํธ ํ์-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// ์ ์ญ์ปดํฌ๋ํธ ๋ฑ๋ก
Vue.component('my-component',{
template: '<div>์ ์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก</div>'
});
new Vue({
el: '#app'
});
</script>
</body>
</html>
์ธ์คํด์ค ๋ด์ฉ์ด ํ๋ฉด ์์๋ก ๋ณํ๋ ๋ ๋ฑ๋ก๋ ์ปดํฌ๋ํธ ํ๊ทธ๋ ํจ๊ป ๋ณํ๋๋ค. ๋ณํ๋ ํ ์ค์ HTML ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ๋ค.
<div id="app">
<button>์ปดํฌ๋ํธ ๋ฑ๋ก</button>
<div>์ ์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก</div>
</div>
์ง์ญ ์ปดํฌ๋ํธ
new Vue({
components: {
'์ปดํฌ๋ํธ ๋ช
' : ์ปดํฌ๋ํธ ๋ด์ฉ
}
});
์ง์ญ ์ปดํฌ๋ํธ๋ ์ธ์คํด์ค์ components
์์ฑ์ ์ถ๊ฐํ๊ณ ๋ฑ๋กํ ์ปดํฌ๋ํธ ๋ช
๊ณผ ๋ด์ฉ์ ์ ์ํ๋ฉด๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<button>์ปดํฌ๋ํธ ๋ฑ๋ก</button>
<my-local-component></my-local-component> <!--์ง์ญ ์ปดํฌ๋ํธ ํ์-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// ์ง์ญ ์ปดํฌ๋ํธ
var cmp = {
// ์ง์ญ ์ปดํฌ๋ํธ ๋ด์ฉ
template: '<div>์ง์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก</div>'
};
new Vue({
el: '#app',
components: {
'my-local-component' : cmp
}
});
</script>
</body>
</html>
๋ณํ๋ ์ค์ HTML์ ๋ค์๊ณผ ๊ฐ๋ค.
<div id="app">
<button>์ปดํฌ๋ํธ ๋ฑ๋ก</button>
<div>์ง์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก</div>
</div>
์ง์ญ vs ์ ์ญ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Component</title>
</head>
<body>
<div id="app">
<h3>์ฒซ ๋ฒ์งธ ์ธ์คํด์ค ์์ญ</h3>
<my-global-component></my-global-component> <!--์ ์ญ ์ปดํฌ๋ํธ ํ์-->
<my-local-component></my-local-component> <!--์ง์ญ ์ปดํฌ๋ํธ ํ์-->
</div>
<hr>
<div id="app2">
<h3>๋ ๋ฒ์งธ ์ธ์คํด์ค ์์ญ</h3>
<my-global-component></my-global-component>
<my-local-component></my-local-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// ์ ์ญ์ปดํฌ๋ํธ ๋ฑ๋ก
Vue.component('my-global-component',{
template: '<div>์ ์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก</div>'
});
// ์ง์ญ ์ปดํฌ๋ํธ
var cmp = {
// ์ง์ญ ์ปดํฌ๋ํธ ๋ด์ฉ
template: '<div>์ง์ญ ์ปดํฌ๋ํธ ๋ฑ๋ก</div>'
};
new Vue({
el: '#app',
components: {
'my-local-component' : cmp
}
});
new Vue({
el: '#app2'
});
</script>
</body>
</html>

์ ์ญ ์ปดํฌ๋ํธ์ ์ง์ญ ์ปดํฌ๋ํธ๋ ์ ํจ๋ฒ์๊ฐ ๋ค๋ฅด๋ค. ์ ์ญ ์ปดํฌ๋ํธ๋ ์ธ์คํด์ค๋ฅผ ์๋ก ์์ฑํ ๋๋ง๋ค ์ธ์คํด์ค์ components ์์ฑ์ผ๋ก ๋ฑ๋กํ ํ์์์ด ํ๋ฒ๋ง ๋ฑ๋กํ๋ฉด ์ด๋ ์ธ์คํด์ค์์๋ ์ง ์ฌ์ฉํ ์ ์๋ค. ์ง์ญ ์ปดํฌ๋ํธ๋ ์ธ์คํด์ค๋ฅผ ์๋ก ์์ฑํ ๋๋ง๋ค ๋ฑ๋กํด์ค์ผํ๋ค.
vue.js:634 [Vue warn]: Unknown custom element: <my-local-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
(found in <Root>)
๋๋ฒ์งธ ์ธ์คํด์ค์ <my-local-component>
ํ๊ทธ๋ ์ ํจ ๋ฒ์ ์์ ์๋๋ผ๋ ์ด ์ปดํฌ๋ํธ๊ฐ ๋ฑ๋ก๋ ์ฒซ ๋ฒ์งธ ์ธ์คํด์ค์ ์ ํจ ๋ฒ์๋ฅผ ๋ฒ์ด๋๊ธฐ ๋๋ฌธ์ ๋ธ๋ผ์ฐ์ ์์ HTML ์ฌ์ฉ์ ์ ์ ํ๊ทธ๋ก ์ธ์ํ๊ณ , ๋ทฐ์์๋ ํด๋น ์ปดํฌ๋ํธ๋ฅผ ์ ๋๋ก ๋ฑ๋กํ๋์ง ๋ฌผ์ด๋ณด๋ ์ค๋ฅ๋ฅผ ํ์ํ๋ค.
์ปดํฌ๋ํธ ๊ฐ ํต์ ๊ณผ ์ ํจ ๋ฒ์
์ปดํฌ๋ํธ๋ ์์ฒด์ ์ผ๋ก ๊ณ ์ ํ ์ ํจ๋ฒ์๋ฅผ ๊ฐ๊ธฐ๋๋ฌธ์ ๋ทฐ๋ ์ปดํฌ๋ํธ๋ก ํ๋ฉด์ ๊ตฌ์ฑํ๋ฏ๋ก ๊ฐ์ ์น ํ์ด์ง๋ผ๋ ๋ฐ์ดํฐ๋ฅผ ๊ณต์ ํ ์ ์๋ค. ๋ฐ๋ผ์ ๊ฐ ์ปดํฌ๋ํธ์ ์ ํจ๋ฒ์๊ฐ ๋ ๋ฆฝ์ ์ด๊ธฐ ๋๋ฌธ์ ๋ค๋ฅธ ์ปดํฌ๋ํ์ ๊ฐ์ ์ง์ ์ ์ผ๋ก ์ฐธ์กฐํ ์ ์๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<my-component1></my-component1>
<my-component2></my-component2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var cmp1 = {
template: '<div>์ฒซ ๋ฒ์งธ ์ง์ญ ์ปดํฌ๋ํธ : {{cmp1Data}}</div>',
data: function(){
return{
cmp1Data: 100
}
}
};
var cmp2 = {
template: '<div>๋ ๋ฒ์งธ ์ง์ญ ์ปดํฌ๋ํธ : {{cmp2Data}}</div>',
data: function(){
return{
cmp2Data: cmp1.data.cmp1Data
}
}
};
new Vue({
el: '#app',
components: {
'my-component1': cmp1,
'my-component2': cmp2
}
});
</script>
</body>
</html>
์ฌ๊ธฐ์ cmp2Data
๋ my-component1์ data.cmp1Data๋ฅผ ์ฐธ์กฐํ๊ณ ์๋ค. ํ์ง๋ง my-component2์์ my-component1์ ๊ฐ์ ์ง์ ์ฐธ์กฐํ ์ ์๋ค.
์ํ์ ์ปดํฌ๋ํธ ๊ด๊ณ
์ปดํฌ๋ํธ๋ ๊ฐ๊ฐ ๊ณ ์ ํ ์ ํจ ๋ฒ์๋ฅผ ๊ฐ๊ณ ์๊ธฐ ๋๋ฌธ์ ์ง์ ๋ค๋ฅธ ์ปดํฌ๋ํธ์ ๊ฐ์ ์ฐธ์กฐํ ์ ์๋ค. ๋ทฐ ํ๋ ์์ํฌ ์์ฒด์์ ์ ์ํ ์ปดํฌ๋ํธ ๋ฐ์ดํฐ ์ ๋ฌ ๋ฐฉ๋ฒ์ ๋ฐ๋ผํ๋ฉฐ, ๊ฐ์ฅ ๊ธฐ๋ณธ์ ์ธ ์ ๋ฌ ๋ฐฉ๋ฒ์ ์์(๋ถ๋ชจ) - ํ์(์์) ์ปดํฌ๋ํธ๊ฐ์ ๋ฐ์ดํฐ ์ ๋ฌ ๋ฐฉ๋ฒ์ด๋ค.

๋ถ๋ชจ์์ ์์์ผ๋ก๋ props
์์ฑ์ ์ ๋ฌํ ์ ์๋ค. ์์์์ ๋ถ๋ชจ๋ก๋ ๊ธฐ๋ณธ์ ์ธ ์ด๋ฒคํธ๋ง ์ ๋ฌํ ์ ์๋ค.
props
props
๋ ๋ถ๋ชจ์์ ์์ ์ปดํฌ๋ํธ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ๋ ์ฌ์ฉํ๋ ์์ฑ์ด๋ค.
Vue.component('child-component',{
props: ['props ์์ฑ๋ช
']
});
์ปดํฌ๋ํธ ์์ฑ์ ์ ์ํ ํ ๋ฑ๋ก๋ child-component ์ปดํฌ๋ํธ ํ๊ทธ์ v-bind
์์ฑ์ ์ถ๊ฐํ๋ค.
<child-component v-bind:props ์์ฑ๋ช
= "์์ ์ปดํฌ๋ํธ์ data ์์ฑ"></child-component>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<child-component v-bind:propsdata="message"></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child-component',{
props: ['propsdata'],
template: '<p>{{propsdata}}</p>'
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
</script>
</body>
</html>
์ปดํฌ๋ํธ ๋ฑ๋ก๊ณผ ๋์์ ๋ทฐ ์ธ์คํด์ค ์์ฒด๊ฐ ์์ ์ปดํฌ๋ํธ๊ฐ ๋๊ธฐ ๋๋ฌธ์ props ์์ฑ์ ํตํด ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ์ ์๋ค.
Emit Events(์ด๋ฒคํธ ๋ฐ์)
์์์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก์ ํต์ ์ ์ด๋ฒคํธ๋ฅผ ๋ฐ์์์ผ์ํ ์ ์๋ค. ๋ถ๋ชจ ์ปดํฌ๋ํธ์์ ์์ ์ปดํฌ๋ํธ์ ํน์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉด ์์ ์ปดํฌ๋ํธ์์ ํด๋น ์ด๋ฒคํธ๋ฅผ ์์ ํด ๋ฉ์๋๋ฅผ ํธ์ถํ ์ ์๋ค.
์ด๋ฒคํธ ๋ฐ์๊ณผ ์์ ํ์
์ด๋ฒคํธ ๋ฐ์๊ณผ ์์ ์ $emit()
๊ณผv-on:์์ฑ
์ ์ฌ์ฉํด ๊ตฌํํ๋ค.
// event ๋ฐ์
this.$emit('์ด๋ฒคํธ๋ช
');
$emit()
์ ํธ์ถํ๋ฉด ๊ดํธ ์์ ์ ์๋ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ฉฐ, ์ผ๋ฐ์ ์ผ๋ก $emit()
์ ํธ์ถํ๋ ์์น๋ ํ์ ์ปดํฌ๋ํธ ํน์ ๋ฉ์๋ ๋ด๋ถ์ด๋ฏ๋ก ์ฌ๊ธฐ์ this
๋ ํ์์ปดํฌ๋ํธ๋ฅผ ๊ฐ๋ฆฌํจ๋ค.
<!-- ์ด๋ฒคํธ ์์ -->
<child-component v-on:์ด๋ฒคํธ๋ช
="์์ ์ปดํฌ๋ํธ ๋ฉ์ธ์ง๋ช
"></child-component>
ํธ์ถํ ์ด๋ฒคํธ๋ ํ์ ์ปดํฌ๋ํธ๋ฅผ ๋ฑ๋กํ๋ ํ๊ทธ์์ v-on
์ผ๋ก ๋ฐ๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<child-component v-on:show-log="printText"></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('child-component',{
template: '<button v-on:click="showLog">show</button>',
methods:{
showLog: function(){
this.$emit('show-log');
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
methods: {
printText: function(){
console.log('recieved event');
}
}
});
</script>
</body>
</html>
์ด์ ๊ฐ์ ๋ฐฉ์์ผ๋ก ์์์์ ๋ถ๋ชจ ์ปดํฌ๋ํธ๋ก ์ ํธ๋ฅผ ์ฌ๋ ค๋ณด๋ด๋ฉด ๋ถ๋ชจ ์ปดํฌ๋ํธ์ ๋ฉ์๋๋ฅผ ์คํํ ์๋ ์๊ณ , ์์ ์ปดํฌ๋ํธ๋ก ๋ด๋ ค๋ณด๋ด๋ props์ ๊ฐ์ ์กฐ์ ํ ์๋ ์๋ค.
๊ฐ์ ๋ ๋ฒจ ์ปดํฌ๋ํธ ๊ฐ ํต์
๋ทฐ๋ ์์์์ ํ์๋ก๋ง ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํด์ผํ๋ ๊ธฐ๋ณธ์ ์ธ ํต์ ๊ท์น์ ๋ฐ๋ฅด๊ธฐ ๋๋ฌธ์ ๊ฐ์ ๋ ๋ฒจ ์ปดํฌ๋ํธ์ ๊ฐ์ ์ ๋ฌํ๋ ค๋ฉด ํ์์์ ๊ณตํต์ ์ธ ์์ ์ปดํฌ๋ํธ๋ก ์ด๋ฒคํธ๋ฅผ ์ ๋ฌํ ํ ๊ณตํต ์์ ์ปดํฌ๋ํธ์์ ํ์ ์ปดํฌ๋ํธ์ props๋ฅผ ๋ด๋ ค ๋ณด๋ด์ผํ๋ค. ํ์ง๋ง ์ด๋ ๊ฒ ํต์ ์ ํ๊ฒ๋๋ฉด ์์ ์ปดํฌ๋ํธ๊ฐ ํ์์์์๋ ๋ถ๊ตฌํ๊ณ ๊ฐ์ ๋ ๋ฒจ๊ฐ์ ํต์ ์ ์ํด ๊ฐ์ ๋ก ์์ ์ปดํฌ๋ํธ๋ฅผ ๋ฌ์ผํ๋ค. ์ด๋ฌํ ์ ์ ํด๊ฒฐํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์ด๋ฒคํธ ๋ฒ์ค์ด๋ค.
์ด๋ฒคํธ ๋ฒ์ค - ๊ด๊ณ ์๋ ์ปดํฌ๋ํธ ๊ฐ ํต์
์ด๋ฒคํธ ๋ฒ์ค๋ ๊ฐ๋ฐ์๊ฐ ์ง์ ํ 2๊ฐ์ ์ปดํฌ๋ํธ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ์ฃผ๊ณ ๋ฐ์ ์ ์๋ ๋ฐฉ๋ฒ์ด๋ค. ์ด๋ฒคํธ ๋ฒ์ค๋ฅผ ์ด์ฉํ๋ฉด ์์-ํ์ ๊ด๊ณ๋ฅผ ์ ์งํ์ง ์๊ณ ๋ฐ์ดํฐ๋ฅผ ๋ค๋ฅธ ์ปดํฌ๋ํธ๋ก ์ ๋ฌํ ์ ์๋ค.
// ์ด๋ฒคํธ ๋ฒ์ค๋ฅผ ์ํ ์ถ๊ฐ ์ธ์คํด์ค 1๊ฐ ์์ฑ
var eventBus = new Vue();
์ด๋ฒคํธ ๋ฒ์ฌ๋ฅด ๊ตฌํํ๋ ค๋ฉด ์ ํ๋ฆฌ์ผ์ด์
์ ๋ก์ง์ ๋ด๋ ์ธ์คํด์ค์๋ ๋ณ๊ฐ๋ก ์๋ก์ด ์ธ์คํด์ค๋ฅผ ํ๊ฐ ์์ฑํด ์ด๋ฒคํธ๋ฅผ ์ฃผ๊ณ ๋ฐ๋๋ค. $emit()
์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ณด๋ด๊ณ , $on()
์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ๋ฐ๋๋ค.
// ์ด๋ฒคํธ๋ฅผ ๋ณด๋ด๋ component
methods:{
๋ฉ์๋๋ช
: function(){
eventBus.$emit('์ด๋ฒคํธ๋ช
',๋ฐ์ดํฐ);
}
}
// ์ด๋ฒคํธ๋ฅผ ๋ฐ๋ component
methods:{
created: function(){
eventBus.$on('์ด๋ฒคํธ๋ช
',function(๋ฐ์ดํฐ){
...
});
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue Sample</title>
</head>
<body>
<div id="app">
<child-component></child-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var eventBus = new Vue();
Vue.component('child-component',{
template: '<div>ํ์ ์ปดํฌ๋ํธ ์์ญ. <button v-on:click="showLog">show</button></div>',
methods:{
showLog: function(){
eventBus.$emit('triggerEventBus',100);
}
}
});
var app = new Vue({
el:'#app',
created: function(){
eventBus.$on('triggerEventBus',function(value){
console.log(value + '๊ฐ์ ์ ๋ฌ๋ฐ์');
});
}
});
</script>
</body>
</html>
show๋ฒํผ ํด๋ฆญ์ showLog() ๋ฉ์๋๊ฐ ์คํ๋๊ณ eventBus ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฐ์ํ ์ด๋ฒคํธ๋ ์์ ์ปดํฌ๋ํธ์ created์ ์๋ eventBus.$on()
์์ ์ ๋ฌ๋ฐ๋๋ค.
์ด๋ฒคํธ ๋ฒ์ค๋ฅผ ํ์ฉํ๋ฉด props ์์ฑ์ ์ด์ฉํ์ง ์๊ณ ๋ ์ํ๋ ์ปดํฌ๋ํธ ๊ฐ์ ์ง์ ์ ์ผ๋ก ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ ์ ์์ด ํธ๋ฆฌํ์ง๋ง, ์ปดํฌ๋ํธ๊ฐ ๋ง์์ง๋ฉด ์ด๋์ ์ด๋๋ก ๋ณด๋๋์ง ๊ด๋ฆฌ๊ฐ ๋์ง ์๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ๋ค. ์ด ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ๋ ค๋ฉด ๋ทฐ์์ค(Vuex)๋ผ๋ ์ํ ๊ด๋ฆฌ ๋๊ตฌ๊ฐ ํ์ํ๋ค.
Last updated
Was this helpful?