18_非单文件组件
Vue使用组件的三大步骤:
一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)
一、如何定义一个组件?
使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一样,但也有点区别;
区别如下:
1.el不写,why?---最终的所有的组件都要被一个vm管理,由vm中的el决定服务哪个容器
2.data必须写成函数,why?---避免组件被复用时,数据存在引用关系
备注:使用template可以配置组件结构
二、如何组测组件?
1.局部组测:靠new Vue的时候传入components选项
2.全局注册:靠Vue.component('组件名',组件)
三、编写组件标签:
<school></school>
代码练习:
第一步:创建组件
第二步:注册组件
局部注册:
全局注册:
第三步:编写组件标签
几个注意点:
1.关于组件名:
一个单词组成:
第一种写法(首字母小写):school
第二种写法(首字母大写):School
多个单词组成:
第一种写法(kebab-case命名):my-school
第二种写法 (CamelCase命名): MySchool(需要Vue脚手架支持)
备注:
(1)组件名尽可能回避HTML已有的元素名称,例如:H2、h2都不行
(2)可以使用name配置项指定组件在开发者工具中呈现的名字
![](https://img2020.cnblogs.com/blog/2546223/202111/2546223-20211112205422225-1847210302.png)
2.关于组件标签:
第一种写法:<school></school>
第二种写法:<school/>
备注:不使用脚手架时,<school/>会导致后续组件不能渲染
3.一个简写方式:
const shool = Vue.extend(options) 可简写为 const shool = options
![](https://img2020.cnblogs.com/blog/2546223/202111/2546223-20211112205537058-1834711466.png)
组件的嵌套:
![](https://img2020.cnblogs.com/blog/2546223/202111/2546223-20211112220111703-464844373.png)
定义一个总的组件:
实例代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>组件的嵌套</title> 8 <script type="text/javascript" src="../js/vue.js"></script> 9 </head> 10 <body> 11 <!-- 准备好一个容器 --> 12 <div id="root"> 13 <!--编写组件标签--> 14 <app></app> 15 </div> 16 </body> 17 <script type="text/javascript"> 18 Vue.config.productionTips = false //阻止vue在启动时生成生产提示 19 //定义student组件 20 const student = Vue.extend({ 21 name:'student', 22 template:` 23 <div> 24 <h2>学生名称:{{name}}</h2> 25 <h2>学生年龄:{{age}}</h2> 26 </div> 27 `, 28 data(){ 29 return { 30 name:'王麻子', 31 age:18 32 } 33 } 34 }) 35 //定义school组件 36 const school = Vue.extend({ 37 name:'school', 38 template:` 39 <div> 40 <h2>学校名称:{{name}}</h2> 41 <h2>学校地址:{{address}}</h2> 42 <student></student> 43 </div> 44 `, 45 data(){ 46 return { 47 name:'尚硅谷', 48 address:'上海' 49 } 50 }, 51 //注册组件(局部) 52 components:{ 53 student 54 } 55 }) 56 //定义hello组件(与student平级) 57 const hello = Vue.extend({ 58 template:`<h1>{{msg}}</h1> `, 59 data(){ 60 return { 61 msg:'欢迎学习Vue' 62 } 63 } 64 }) 65 //定义app组件 66 const app = Vue.extend({ 67 template:` 68 <div> 69 <hello></hello> 70 <school></school> 71 </div> 72 `, 73 components:{ 74 school, 75 hello 76 } 77 }) 78 //创建vm 79 new Vue({ 80 //template:`<app></app>`,(相当于容器里面的编写组件标签<app></app) 81 el:'#root', 82 //注册组件(局部注册) 83 components:{app} 84 }) 85 </script> 86 </html>