本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
局部注册，通过 components:{cpnc:cpnc}
首先了解一下注册的两种方式：
全局注册，通过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)； 同时 父组件中只能使用 ，不能使用 。
2.在局部注册组件时，推荐使用components: {cpnc: cpnc} 或者components: {cpnc} 还有components: {myCpnc: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">
<cpn2>
<!-- <cpn1></cpn1> -->
</cpn2>
</div>
<script type="text/javascript">
const cpn1 = Vue.extend({
template: `
<div>
<h2>标题一</h2>
<p>内容1...</p>
<p>内容1...</p>
</div>
`
})
const cpn2 = Vue.extend({
template: `
<div>
<h2>标题二</h2>
<p>内容2...</p>
<p>内容2...</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1
}
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
cpn2
}
})
</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">
<cpn2>
<!-- <cpn1></cpn1> -->
</cpn2>
</div>
<script type="text/javascript">
const cpn1 = Vue.extend({
template: `
<div>
<h2>标题一</h2>
<p>内容1...</p>
<p>内容1...</p>
</div>
`
})
const cpn2 = Vue.extend({
template: `
<div>
<h2>标题二</h2>
<p>内容2...</p>
<p>内容2...</p>
<cpn1></cpn1>
</div>`,
components: {
cpn1
}
})
const vm = new Vue({
el: '#app',
data: {
},
methods: {
},
components: {
cpn2
}
})
</script>
</body>
</html>
效果：
这种用构造器的方法写太过于繁琐，这里有另一种写法：
注册组件的语法糖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<title>全局组件语法糖</title>
</head>
<body>
<div id="app">
<!-- <cpn1></cpn1> -->
<cpn2></cpn2>
</div>
<script>
// 注册了全局组件，可以不用构造器
Vue.component('cpn1',{
template:`<div>
<h2>全局组件语法糖</h2>
<p>全局组件语法糖</p>
</div>`
})
const app = new Vue({
el: "#app",
data: {
},
components:{
cpn2:{
template:`<div>
<h2>全局组件语法糖</h2>
<p>全局组件语法糖</p>
<cpn1></cpn1>
</div>`
}
}
})
</script>
</body>
</html>
效果如下：
由于把html语言写在组件里面很不方便，也不太好看所以将它们分开写。
下面就用到了另外两种
组件分离写法
第一种分离写法：
单独写一个script标签把组件写进去
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="app">
<cpn1></cpn1>
</div>
<script type="text/x-template" id="cpn1"> //模板分离语法
<div>
<h1>h1</h1>
<p>p1</p>
</div>
</script>
<script type="text/javascript">
Vue.component('cpn1', { //这里不要加#号
template: '#cpn1' //这里要加#号
})
const vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
后面记得加id
输出结果：
