首先了解一下注册的两种方式：
全局注册，通过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 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>
注意#号在什么位置添加，什么位置不添加
