1.效果图
2.测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script src="./vue.min.js"></script>
<body>
<template id="templ">
<div>
<h3>这是vue的组件第三种创建全局组件的方式</h3>
</div>
</template>
<div id="test">
{{msg}}
<my-com1></my-com1>
<mycomjx></mycomjx>
<mycom2></mycom2>
<Mycom2></Mycom2>
<mycom3></mycom3>
</div>
<template id="templ">
<div>
<h3>这是vue的组件第三种创建全局组件的方式</h3>
</div>
</template>
<script >
//创建vue全局组件的三种方式
//第一种创建方式【拆散】
// 1.1使用vue.extends 来创建vue的全局对象
var com1=Vue.extend({
//使用template,指定了组件要创建的html结构
template:'<h3 style="color:red">这是vue的组件分开写创建全局组件的第一种方式</h3><span>内容2</span>'
})
//1.2使用vue.components('组件名字',创建出来的模板对象)来注册组件
Vue.component('myCom1',com1)
//1.3将注册好的组件名字以html标签的格式来使用组件
//【需要注意组件名如果大写,那么大写的地方就要换成小写,同时大写前面要加上一个下划线_,第一个字母大写除外】
//第一种简写
Vue.component('mycomjx',Vue.extend({
//使用template,指定了组件要创建的html结构
template:'<h3 style="color:red">这是vue的组件简写创建全局组件的方式</h3>'
}))
//【若注册的组件名是小写,那么就直接使用html标签即可】
//第一种的第二种简写
Vue.component('Mycom2',{
template:'<h3 style="color:blue">这是vue的组件第二种创建全局组件的方式</h3>'
})
//【若注册的组件名是第一个字母是大写,那么就直接使用html标签,第一个字母大小写都可】
//创建vue全局组件的第二种方式
//第三种创建vue组件方式【template属性值是个字符串,内部拼写标签不智能,所以一般采用第三种方式,外部渲染模板】
//需要注意的是这种方式,渲染模板,最好要放在vue实例控制的test外定义template模板,特定场合会有样式问题
Vue.component('mycom3',{
template:'#templ'
})
new Vue({
el:"#test",
data:{
msg:"这是数据"
}
})
</script>
</body>
</html>
3.注意事项
1.vue创建组件的时候V要大写
2.vue创建全局组件,extend和component不要加s,加s一般是创建私有组件,定义格式也不一样,一般在vue实例对象中定义
3.无论哪种全局创建方式最外层的根标签只能有一个,不然可能会报错