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配置项指定组件在开发者工具中呈现的名字

2.关于组件标签：

第一种写法：<school></school>

第二种写法：<school/>

备注：不使用脚手架时，<school/>会导致后续组件不能渲染

3.一个简写方式：

const shool = Vue.extend(options) 可简写为 const shool = options

组件的嵌套：

定义一个总的组件：

实例代码：

 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>

posted on 2021-11-13 09:44 我不想一直当菜鸟阅读(64) 评论(0) 编辑收藏举报

18_非单文件组件

搜索

常用链接

我的标签

随笔分类

随笔档案

阅读排行榜

推荐排行榜