目录
局部注册,通过 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);同时 父组件中只能使用<my-cpn></my-cpn> ,不能使用<myCpn></myCpn>。
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 type="text/x-template" id="">
单独写一个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>
<script type="text/x-template" id="cpn1">
后面记得加id
输出结果:
第二种分离写法:<template>
例子:
<!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>
<template id="cpn1"> //template标签
<div>
<h1>h1</h1>
<p>p1</p>
</div>
</template>
<script type="text/javascript">
Vue.component('cpn1', { //不加#号
template: '#cpn1' //加#号
})
const vm = new Vue({
el: '#app',
})
</script>
</body>
</html>
注意#号在什么位置添加,什么位置不添加