<div id="app2">
<my-component></my-component>
</div>
<script>
//컴포넌트 등록
Vue.component('my-component',{
template:`
<div>
{{component}}<br>
<button @click="instanceToggle">component button</button>
<sec-component></sec-component>
</div>
`,
data(){
// 컴포넌트는 레퍼런스주소로 넘겨주기때문에 data()함수로 오브젝트를 리턴해줌
return{
component : 'component'
}
},
methods:{
instanceToggle(){
this.component = 'clicked'
}
}
})
Vue.component('sec-component',{
template:`
<div>
second component
</div>
`
})
const app2 = new Vue({
el: 'app2',
data: {
instance: 'app2'
},
methods:{}
instanceToggle(){
app2.instance = 'clicked!'
}
})
</script>
전역컴포넌트의 예이다.
두개의 컴포넌트가 있다.
body에서 태그를 사용하고, 해당태그안의 내용은 component의 template에서 정의한다.
컴포넌트는 인스턴스보다 위에서 정의해줘야한다. 동작안함. 개삽질해따
가장바깥에 div로 rapping해주어야하고, 백틱(``) 을 사용한다.
재사용이 가능하다.
어떤 Vue 인스턴스안에서도 사용가능하다.
<div id="app3">
{{instance}}<br>
<local-component></local-component>
</div>
<script>
//인스턴스옵션으로 지역컴포넌트등록
const localComponent = {
template:`
<div>
{{component}}<br>
<button @click="instanceToggle">local component button</button>
</div>
`,
data(){
return{
component : 'local component'
}
},
methods:{
instanceToggle(){
this.component = 'clicked'
}
}
}
//사용할 컴포넌트들만 components옵션을 통해 사용할수있음
//app3 인스턴스에서 컴포넌트를 등록했기때문에 여기서만 사용가능
const app3 = new Vue({
el: '#app3',
components:{
'local-component' : localComponent
}
})
</script>
지역컴포넌트는 인스턴스형태로 등록해주며 사용할 인스턴스 안에 정의를 해줘야 사용이 가능하다.
전역컴포넌트는 사용하지 않더라도 최종빌드에 포함되기때문에 불필요하게 자바스크립트의 양이 늘어나게된다.