Vue---组件——组件名、非单文件组件、单文件组件

小灰灰 2024-04-07 13:22 82阅读 0赞

**目录**

总结

Vue中使用组件的三大步骤：

如何定义一个组件？

如何注册组件

关于组件标签

关于组件名

一个简写方式：

一、非单文件组件（开发几乎不用）

1.局部

2.全局

二、组件的嵌套

三、关于VueComponet

四、重要的内置关系

五、单文件组件

--------------------

## 总结 ##

### Vue中使用组件的三大步骤： ###

1.定义组件（创建组件）

2.注册组件

3.使用组件（写组件标签）

### 如何定义一个组件？ ###

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有差别

区别：

1.el不写 ---- 最终所有的组件都要经过一个vm管理，由vm中的el决定服务哪个容器

2.data必须写成函数 -----避免组件被复用时，数据存在引用关系（比如a，b同时用了data数据，a改了数据，那b得到的数据就是a改了之后的数据）

备注：使用template可以配置组件结构

### 如何注册组件 ###

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component('组件名',组件)

### 关于组件标签 ###

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

第二种写法：<school/>

备注：

不适用脚手架时，<school>会导致后续组建不能渲染

##  ##

### 关于组件名 ###

一个单词组成：

第一种写法（首字母小写）：school

第二种写法（首字母大写）：School

多个单词组成：

第一种写法（kebab-case命名）：my-school

第二种写法（CamelCase命名）：MySchool（需要Vue脚手架支持）

备注：

组件名尽可能回避HTML中已有的元素名称，例如：h2,H2都不可以

可以使用name配置项指定组件在开发者工具中呈现的名字，如下所示

![79203d58e10e4c19add0948efc4291c1.png][]

![1e0aedbb5182457dabb66aa6f518236c.png][]

### 一个简写方式： ###

const school = Vue.extend(options) 简写：const school = options

这种简写方式，表面没有调用Vue.extend ，但是最终还是被调用了

![6122804d2e5443c09bf61872635603dd.png][]

## 一、非单文件组件（开发几乎不用） ##

一个文件中包含n个组件

### 1.局部 ###

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
            
            <school></school>
              <br><br>
            <student></student>
            </div>
    
        </body>
        
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
            
            // 创建school组件
            const school = Vue.extend({
                // 用div包裹，但是这个div最终不会出现在页面上
                template:`<div>
                       <h2>学校名称：{
       {schoolName}}</h2>
                       <h2>学校地址：{
       {address}}</h2>
                       <button @click="showName">点我提示学校名称</button>
                         </div> `
                ,
    
                //     el:'#root',   如果存在此语句的话，也会报错
    
                // 如果data写成这种形式会报错，只能写成函数的形式
                // data:{
                //   schoolName:'尚硅谷',
                //   address:'北京昌平',
                // },
                data(){
                    
                    return{
                     schoolName:'尚硅谷',
                     address:'北京昌平',
                    }
                },
                methods: {
                    showName(){
                        alert(this.schoolName)
                    }
                },
            })
            // 创建student组件
            const student = Vue.extend({
                template:`<div>
                             <h2>学生姓名：{
       {studentName}}</h2>
                             <h2>学生年龄：{
       {age}}</h2>
                          </div> `
                ,
                data(){
                  return{
                    studentName:'张三',
                    age:18
                  }
                }
            })
          
            new Vue({
                el:'#root',
                // 这个地方依然可以写数据，依然可以用
                data:{
    
                },
                // 注册组件（局部注册
                components:{
                    // 这个地方是key：value的形式   value就是我们上面定时的const
                    // school:school,
                    // student:student
                    // 下面是简写
                    school,
                    student
                }
            })
    
        </script>   
    </html>

![a268899344cb43619a423cc5b4ca4052.png][]

### 2.全局 ###

我们只需要下面这么注册即可，第一个参数是我们为组件起的名字，第二个参数就是我们const命名的名字，还是类似局部的key，value形式，将其对应起来

![9be150f210fd42afa74b06234b1ea33e.png][]

## 二、组件的嵌套 ##

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title> 初识vue</title>
            
            <script type="text/javascript" src="../js/vue.js"></script> 
        </head>
        <body>
            <div id="root">
                 <app></app>
            </div>
    
        </body>
        
        <script type="text/javascript">
            //阻止vue在启动时生成生产提示
            Vue.config.productionTip=false
    
            // 创建student组件
            const student = Vue.extend({
                template:`<div>
                             <h2>学生姓名：{
       {studentName}}</h2>
                             <h2>学生年龄：{
       {age}}</h2>
                          </div> `
                ,
                data(){
                  return{
                    studentName:'张三',
                    age:18
                  }
                }
            })
    
            // 创建school组件
            const school = Vue.extend({
                // 用div包裹，但是这个div最终不会出现在页面上
                template:`<div>
                       <h2>学校名称：{
       {schoolName}}</h2>
                       <h2>学校地址：{
       {address}}</h2>
                       <student></student>
                         </div> `
                ,
                data(){
                    
                    return{
                     schoolName:'尚硅谷',
                     address:'北京昌平',
                    }
                },
                components:{
                    // 注意！这里嵌套的时候有一个先后关系，一定要先创建student组件
                    student
                }
            })
    
            // 创建hello组件
            const hello =Vue.extend({
                template:`<h1>{
       {msg}}</h1>`,
                data(){
                    return {
                        msg:'欢迎来到尚硅谷学习'
                    }
                }
            })
    
            // 创建app组件  其他的组件都在这个地方
            // 一人之下，万人之上（在vm下）
            const app = Vue.extend({
                template:  `
                            <div>
                                 <hello></hello>
                                 <school></school>
                             </div>    `
     
                ,
                components:{
                    school,
                    hello,
                }
            })
    
    
            new Vue({
                el:'#root',
                components:{
                   app
                }
    
            })
    
        </script>   
    </html>

![0434eba42f284ae0a0a6b562f0e2a50c.png][]

![b31dd4ce25f04efca4d360d89aa2707e.png][]

![e0fef81a7fa84564a517442c52b21ae3.png][]

## 三、关于VueComponet ##

1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent（options）

**3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！**

下面两个组件 school的vc和hello的vc是两vc，只不过长得一模一样

![26a4d2973ab84c89bcf612f6a3d052f4.png][]

![c9ed50746ae445e19e8cdb0f26b88406.png][]

4.关于this的指向

组件配置中：

data函数、methods中的函数、watch中的函数、computed中的函数，this指向的均是vc实例对象

new Vue（）配置中

data函数、methods中的函数、watch中的函数、computed中的函数，this指向均是vm实例对象

**vc和vm 的功能是一个样子的，也有数据代理**

5.VueComponent的实例对象，以后简称vc，也可称为组件实例对象

Vue的实例对象，以后简称vm

## 四、重要的内置关系 ##

内置关系：VueComponent.prototype.\_proto\_ === Vue.prototype

![65ef9828b9f4402a9ccd06bbdcf3789d.png][]

![dab28e0b6245471db4e6a7e2a24de6eb.png][]

## 五、单文件组件 ##

直接看脚手架

##  ##

[79203d58e10e4c19add0948efc4291c1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/7db974ea8ba94a43b781be9fb50796f7.png
[1e0aedbb5182457dabb66aa6f518236c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/89c0f9fba2514fcbb4072b72c6217559.png
[6122804d2e5443c09bf61872635603dd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0c35f6cf325d4f68845f72b5751a68f5.png
[a268899344cb43619a423cc5b4ca4052.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/ae789236d2ea4547b984c4e476f9d1c0.png
[9be150f210fd42afa74b06234b1ea33e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/03c4d4d86c8d430bb575c5d28182429c.png
[0434eba42f284ae0a0a6b562f0e2a50c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/f4a177b3e4964d84b92a39cc995a77ba.png
[b31dd4ce25f04efca4d360d89aa2707e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/2115fe37bcf648509eeb8441d2921886.png
[e0fef81a7fa84564a517442c52b21ae3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/bdc1654b274145a2a74158d834c56799.png
[26a4d2973ab84c89bcf612f6a3d052f4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/877400260dff47058e16a67a277e7bc6.png
[c9ed50746ae445e19e8cdb0f26b88406.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/d1db58ab3afb40b68aceb9ad70f46de6.png
[65ef9828b9f4402a9ccd06bbdcf3789d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/116147ee1d7941208edcabb2a3218348.png
[dab28e0b6245471db4e6a7e2a24de6eb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/07/0cc0efe9de0f4de9bb71d2cbbaf77dd5.png