全局注册，通过Vue.component
局部注册，通过 components:{cpnc:cpnc}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<!-- 自定义组件 -->
<!-- <my-cpn></my-cpn> -->
<cpnc></cpnc>
</div>
<script type="text/javascript">
const cpnc = Vue.extend({
template:
`<div>
<h2>标题</h2>
<p>这是一个p标签</p>
</div>`
})
// Vue.component('my-cpn',cpnc) //全局组件化
const vm = new Vue({
el:'#app',
data:{
},
methods:{
},
components:{ //局部组件化
// cpnc:cpnc
cpnc //ES6语法简化写法
}
})
</script>
</body>
</html>
效果图如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
//1、3、使用间隔符
<my-cpn></my-cpn>
//2、 <!-- <cpnc></cpnc> -->
</div>
<script type="text/javascript">
//
const cpnc = Vue.extend({
template:
`<div>
<h2>标题</h2>
<p>这是一个p标签</p>
</div>`
})
// Vue.component('my-cpn',cpnc) //1、全局组件化
const vm = new Vue({
el:'#app',
data:{
},
methods:{
},
components:{ //2、局部组件化
// cpnc:cpnc
// cpnc //ES6语法简化写法
///3、这里使用驼峰命名
myCpn:cpnc
}
})
</script>
</body>
</html>
1.在全局注册组件时，推荐组件名使用间隔符Vue.component('my-cpn', cpnc) ，也可用驼峰写法 Vue.component('myCpn',cpn)；同时 父组件中只能使用<my-cpn></my-cpn> ，不能使用<myCpn></myCpn>。
2.在局部注册组件时，推荐使用components: {cpnc: cpnc}或者components: {cpnc} 还有components: {myCpnc:cpnc}都可