結構部分:
<div id="app">
<h1>{{msg}}</h1>
<hello-world></hello-world>
</div>
<div id="web">
<h1>{{msg}}</h1>
<hello-world></hello-world>
</div>
?Vue的全局組件要在實例Vue之前創(chuàng)建,書寫方式有兩種:
一:
(先定義組件:)
?Vue.component("helloWorld",{
template:`<div>? <h1>{{msg}}</h1>? ?</div>`,
data(){
return{? title:"這是全局組件"? }
}
})
實例Vue:
new Vue({
el:"#app",
data:{
msg:"這是頂層組件1"
}
})
new Vue({
el:"#web",
data:{
msg:"這是頂層組件2"
}
})
? ? ? ? ?第一種全局組件的創(chuàng)建時,在template時會有點繁瑣,并且不會產生任何的輸入提示,不方便,所以Vue提供了一個template的標簽,可以更方便的創(chuàng)建組件
二:
? ? ? ?(創(chuàng)建template模板)
<template id="one">
<h1>{{msg}}</h1>
</template>
? ? (在Vue中進行定義:)
Vue.component("helloWord",{
template:"#one",
data(){
return { msg:"這是全局組件" }
}
})
接下來就可以進行使用了
<div id="app">
<hello-world></helloWorld>
</div>
全局組件創(chuàng)建完畢.可以在任意一個Vue實例中使用,只需要引入組件名標簽即可
此處:? ? 關于helloWord標簽的解釋:因為在js中,不允許使用中劃線,所以如果通過小駝峰的命名方式,在html中需要加上中劃線,在html中,這些標簽名都會被自動解釋為小寫的沒有符號的標簽名.? ? ? ?但是建議組件名一致
局部組件的使用規(guī)則,就是誰注冊誰使用
先創(chuàng)建html標簽:
<div id="app">
{{msg}}
使用組件
<hello></hello>
</div>
創(chuàng)建template模板:
<template id="two">
<h1>{{msg}}</h1>
</template>
定義組件:
const tmp = {
template:"#two",
data(){
return {? msg:"這是局部組件"? }
}
}
注冊組件:
new Vue({
el:"#app",
data:{
msg:"這是頂層組件"
},
components:{
"hello":tmp
}
})
