Vue를 이용한 web UI개발
뷰가 넘어지면? ㅕㄸ 🙃
반대로 넘어지면? 끄ㅑ🤣- component기반의 개발
- MVVM 패턴
component를 왜 조각조각 만드나요?
재활용성과 유지보수성 때문!
"Data 속성"
Root component(Vue instance)
: data속성을 가지고 있어요
다른 하위 componemt들(전역지역 관계없이)
->재사용이 목적.
@ Root component 연습해보자
<body>
<div id="app">
Root component 변수의 값은 : {{myName}}
<global-component></global-component> <!--컴포넌트를 쓸떄마다 객체가 만들어져서 리턴됨-->
</div>
<script>
//전역 컴포넌트 방법1
let tmp = {
// myName: '서강준', //property
// myFunc: function(){}, //property. myFunc란 key로 함수가 달려있어요. method아님! 생성자임
// mySum(){ //method
// // 얘는 함수지만 생성자 함수로 사용X
// }
data(){
return{
myData:200
}
}
}
//전역 컴포넌트 방법2
Vue.component('global-component',{
//해당 컴포넌트가 어떤식으로 표현될지 작성
template: '<div>변수의 값은:{{ myData }}</div>',
// 객체가 아닌 함수로 표현한다
data: function() {
return{
//컴포넌트가 가지고 있는 데이터를 함수 내 객체에 표현
myData:200
};
}
});
new Vue({
el: '#app',
data:{
myName:'차은우'
}
});
</script>
</body>즉, Data속성은 반드시 함수로 표현해야해요❗
그리고 이 함수 안에서 객체를 리턴해야해요
component의 Scope
component의 data는 scope가 각 component로 한정돼요
그래서 하나의 component에서 다른 component의 data를 직접적으로 access할 수 없어요
그러면 어떻게 해야 component간 데이터 통신을 할 수 있나요?
Vue는 몇가지 방법을 제공해요
기본은 component가 상하 관계일때
: 상위가 하위에게 Props를 전달 할 수 있음
하위에서 상위로는
: event를 전달
'props와 event를 이해해보자'
"props"
상위 ➡️ 하위
<body>
<div id="app">
<child-component v-bind:props-data="message"></child-component>
</div>
<script>
// 컴포넌트 하나를 전역 컴포넌트로 등록하고
Vue.component('child-component',{
// data(){
// return {
// myData:200
// }
// },
// props를 이용해서 상위컴포넌트가 전달하는 데이터를 받는
// 변수를 선언해요(배열 안에 문자열 형태로 카멜케이스로 나옴)
// 방법1 props: ['propsData','secondData'],
// 방법2 객체 형태
props: {
propsData: String, //value값은 데이터타입을 나타내는 생성자 함수
},
template: '<div>여기는 하위 컴포넌트 => {{propsData}} </div>'
});
// Vue instance에 하위 컴포넌트로 해당 컴포넌트를 포함시킬거예요
new Vue({
el: '#app',
data: {
message : '뾰롱뾰롱뾰롱'
}
})
// 즉, Vue instance가 상위가 되고 포함되는 전역component는 하위가 돼요
// Props를 이용하면 상위 component에서 하위 coponent로 데이터를 전달할 수 있어요
// vue instance의 data를 전역 컴포넌트에 전달 할 수 있어요
</script>
</body>"event 전달"
하위 ➡️ 상위
: event를 emit시켜서 상위component에 신호를 보내면 돼요!
EventBus에 대해 알아보아요
<body>
<!-- eventbus를 이용해서 하위 component에서 상위 component로 event전달-->
<div id="app">
<child-component></child-component>
</div>
<script>
// EventBus를 이용하기 위해서 vue instance를 생성
let eventBus = new Vue();
// 하위 component로 사용할 전역 component를 등록해보아요
Vue.component('child-component',{
template: '<button v-on:click="btnClick">클릭클릭</button>',
methods: {
btnClick: function(){
// eventBus에 대해서 event를 발생시켜요
eventBus.$emit('generateEvent',300)
}
}
})
//root component
new Vue ({
el:'#app',
created: function(){
//이벤트 버스에 대해서 이벤트를 등록해놓아요!
eventBus.$on('generateEvent', function(value){ //value는 300을 받음
console.log('이벤트 발생', value);
})
}
})
</script>
</body>//여기까지가 Data전달 방법
지니야 코딩 해줘