Vue 입문 - Component
- 데이터 전달
부모 -> 자식
부모 : props : ['props 속성 이름'];
자식 : v-bind:props="props 속성 이름";
<div id ="app">
<child-component v-bind:propsdata="message"></child-component>
</div>
...
<script>
Vue.component('child-component', {
props : ['propsdata'],
template: ...,
});
new Vue({
el:'#App',
data: {
message : 'AAA'
}
});
</script>
- 이벤트 전달
자식 -> 부모
자식 : this.$emit('이벤트명');
부모 : v-on:이벤트명 : "상위 컴포넌트의 메서드명"
<div id ="app">
<child-component v-on:show-log="printText"></child-component>
</div>
...
<script>
Vue.component('child-component', {
template: '<button v-on:click="showLog">show</button>',
methods: {
showLog: functoin(){
this.$emit('show-log');
}
});
new Vue({
el:'#App',
methods: {
printText:function(){
console.log("received an event");
}
});
</script>
- 이벤트 전달
형제 -> 형제
형제1var eventBus = new Vue(); methods: { 메소드명 : function(){ eventBus.$emit('이벤트명', 값); }
형제2
var eventBus = new Vue(); methods : { created : function () { eventBus.$on('이벤트명' function(값){ ... }); } }
<div id ="app">
<child-component></child-component>
</div>
...
<script>
var EventBus = new Vue();
var tempValues = 100;
Vue.component('child-component', {
template: '<div>child Componet. <button v-on:click="showLog">show</button></div>,
methods: {
showLog: functoin(){
eventBus.$emit('triggerEventBus', 'tempValues');
}
});
new Vue({
el:'#App',
created: function(){
eventBus.$on('triggerEventBus':function(tempValues){
console.log("Received Values : ", tempValues);
});
}
});
</script>
Author And Source
이 문제에 관하여(Vue 입문 - Component), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@android_z/Vue.js-Component저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)