结构部分:
<div id="app">
<h1>{{msg}}</h1>
<hello-world></hello-world>
</div>
<div id="web">
<h1>{{msg}}</h1>
<hello-world></hello-world>
</div>
Vue的全局组件要在实例Vue之前创建,书写方式有两种:
一:
(先定义组件:)
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"
}
})
第一种全局组件的创建时,在template时会有点繁琐,并且不会产生任何的输入提示,不方便,所以Vue提供了一个template的标签,可以更方便的创建组件
二:
(创建template模板)
<template id="one">
<h1>{{msg}}</h1>
</template>
(在Vue中进行定义:)
Vue.component("helloWord",{
template:"#one",
data(){
return { msg:"这是全局组件" }
}
})
接下来就可以进行使用了
<div id="app">
<hello-world></helloWorld>
</div>
全局组件创建完毕.可以在任意一个Vue实例中使用,只需要引入组件名标签即可
此处: 关于helloWord标签的解释:因为在js中,不允许使用中划线,所以如果通过小驼峰的命名方式,在html中需要加上中划线,在html中,这些标签名都会被自动解释为小写的没有符号的标签名. 但是建议组件名一致
局部组件的使用规则,就是谁注册谁使用
先创建html标签:
<div id="app">
{{msg}}
使用组件
<hello></hello>
</div>
创建template模板:
<template id="two">
<h1>{{msg}}</h1>
</template>
定义组件:
const tmp = {
template:"#two",
data(){
return { msg:"这是局部组件" }
}
}
注册组件:
new Vue({
el:"#app",
data:{
msg:"这是顶层组件"
},
components:{
"hello":tmp
}
})
