Vue学习：组件化

柔光的暖阳◎ 2023-10-04 19:48 83阅读 0赞

人处理问题的方式:

>  *  任何一个人处理信息的逻辑能力都是有限的
>  *  所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。
>  *  但是，我们人有一种天生的能力，就是将问题进行拆解。
>  *  如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
>  *  
> 
> ![c4cdccc01ccf4efb890925c9c0dfca26.png][]

认识组件化开发:

> 组件化也是类似的思想：
> 
>  *  如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展；
>  *  但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了；
>  *  如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目；
> 
> ![e00b597ebcec4a93b301eaad3159e24e.png][]
> 
> 组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构：
> 
> ![3e2df36bf0ac496989806dd3f8401dad.png][]

**组件(Component):** 定义: 用于实现局部功能的代码和资源的集合

作用: 复用编码,简化项目编程.提高运行效率

#### 4.1 组件分类 ####

组件可以分为:非单文件组件和单文件组件

>  *  非单文件组件
>     
>     > 定义: 一个文件中包含n个组件
>     
>     优缺点:
>  *  模板编写没有提示
>  *  没有构建过程, 无法将 ES6 转换成 ES5
>  *  不支持组件的 CSS
>  *  真正开发中几乎不用

> **组件注意事项:**
> 
> 1.  组件名称
> 
> > 1.  一个单词组成
> > 
> >  *  第一种写法: 首字母小写: person
> >  *  第二种写法: 首字母大写: Person
> > 
> > 1.  多个单词组成
> > 
> >  *  第一种写法(kebab-case命名):my-person
> >  *  第二种写法:大驼峰命名法: MyPerson (需要vue脚手架支持)
> > 
> > > 注意:
> > > 
> > > 1.  组件名尽可能回避HTML中已有的元素名称,比如:div,h1等
> > > 2.  可以使用name配置项指定组件在开发者工具中呈现的名字
> 
> 2.关于标签名
> 
> > 1.  双标签:`<person></person>`
> > 2.  单标签:`<person/>` (需要vue脚手架支持)
> > 
> > > 注意: 不使用脚手架时,`<person/>`会导致后续组件不能渲染

组件嵌套:

> 一个组件中又注册其他组件,这就形成了组件嵌套
> 
>     <!DOCTYPE html>
>     <html lang="en">
>     
>     <head>
>     <meta charset="UTF-8">
>     <meta name="viewport" content="width=device-width, initial-scale=1.0">
>     <meta http-equiv="X-UA-Compatible" content="ie=edge">
>     <title>Document</title>
>     <style type="text/css">
>     </style>
>     <script src="./js/vue.global.js"></script>
>     </head>
>     <body>
>     <div id="box">
>       <person></person>
>       <hr/>
>     </div>
>     <script type="text/javascript" >
>        const {createApp} = Vue
>        const job = {
>            name:'gongzuo',
>            data(){
>                return {
>                    name:'java程序员',
>                    salary: 8000
>                }
>            },
>            template:`<p>岗位:{
>         {name}}</p>
>                     <p>薪水:{
>         {salary}}</p>`,
>        }
>        const person = {
>            data(){
>                return {
>                    name:'张三',
>                    age:21
>                }
>            },
>            template:`<p>姓名:{
>         {name}}</p>
>                     <p>年龄:{
>         {age}}</p>
>                     <job></job>`,
>            components:{
>                job,
>            }
>        }
>        var app = createApp({
>            components:{
>                person: person,
>            },
>            data(){
>                return {}
>            },
>        }).mount("#box");
>     </script>
>     </body>
>     </html>

单文件组件

> 定义: 一个文件中包含1个组件
> 
> 实际开发使用一般使用单文件组件

> **注意:**
> 
> 1.  单文件组件的后缀名为.vue
> 2.  .vue文件无法直接在浏览器使用,需要借助vue的脚手架
> 3.  一个.vue的文件结构:
> 
>     <template>
>       
>     
>     </template>
>     <script>
>      //组件交互相关的js代码
>     </script>
>     
>     <style>
>      /*组件的样式 */
>     </style>
> 
> 单文件组件无法直接在浏览器运行,因为我们的浏览器无法直接使用ES6语法以及vue文件, 那怎么才能在页面展示呢? 这就需要我们使用vue的脚手架.

#### 4.2 使用Vue脚手架 ####

> 1.  Vue 脚手架是Vue官方提供的标准化开发工具(开发平台)
> 2.  官方文档: [Vue CLI][]

使用vue-cli创建项目的步骤:

> 第一步(仅需第一次执行): 安装nodejs环境
> 
> 官网下载nodejs: [Download | Node.js][Download _ Node.js]
> 
> 参考:资料/vue.js环境搭建.docx
> 
> 第二步(仅需第一次执行): 全局安装@vue/cli
> 
>     npm install -g @vue/cli
> 
> 第三步:切换到你需要创建项目的目录,然后使用命令创建项目
> 
>     vue create 项目名
> 
> ![3b26902631d34b07b47dc6895a36d48d.png][]
> 
> 启动项目
> 
>     npm run serve
> 
> ![728c0f6593f14b55ad94d109e41bc172.png][]

![2f02575cb1894923b30d88fd02229fa9.png][]

> > 注意：
> > 
> > 1.  如果出现下载缓慢,请配置npm淘宝镜像:
> > 
> >     npm config set registry https://registry.npm.taobao.org
> > 
> > 查看使用的镜像:
> > 
> >     npm get registry
> > 
> > 1.  Vue脚手架隐藏了所有的webpack相关的配置,若想查看具体的webpack配置,请执行
> > 
> >     vue inspect > output.js
> > 
> > 1.  如果已经安装了vue/cli其他版本,运行上面命令会报错:
> > 
> > 1.  检查你是否安装vue/cli,只需要在命令行运行vue指令,如果不报错,则说明安装成功
> 
> > **注意:**
> > 
> > 在开发过程中,我们先关闭ES的语法检查:
> > 
> > 在vue.config.js文件中添加如下配置:
> > 
> >     lintOnSave:false,//关闭语法检查
> > 
> > 重启项目

#### 4.3 单文件组件 ####

在src/components目录下创建Person.vue组件

**Person.vue**

<template>
        
        <p>姓名:{
       {name}}</p>
        <p>年龄:{
       {age}}</p>
    </template>
    <script>
       //组件交互相关的js代码
       export default{
                name:'Person',
                data(){
                    return {
                        name:'张三',
                        age:21
                    }
                },
       }
    </script>
    
    <style>
       /*组件的样式 */
       p{
        color:red;
       }
    </style>

在src/App.vue组件中注册Person组件,并使用Person组件

<template>
        <div>
            <Person></Person>
        </div>
    </template>
    
    <script>
    import Person from './Person.vue'
    export default {
        name:'App',
        data() {
            return {
                
            };
        },
        components:{
            Person,
        },
    };
    </script>
    
    <style lang="scss" scoped>
    
    </style>

使用`npm run serve`启动运行

#### 4.4 ref特殊属性 ####

虽然 Vue 的声明性渲染模型为你抽象了大部分对 DOM 的直接操作，但在某些情况下，我们仍然需要直接访问底层 DOM 元素。要实现这一点，我们可以使用特殊的 `ref` 属性：

`ref` 是一个特殊的 attribute，和 `v-for` 章节中提到的 `key` 类似。它允许我们在一个特定的 DOM 元素或子组件实例被挂载后，获得对它的直接引用。

**访问引用:**

挂载结束后引用都会被暴露在 `this.$refs` 之上：

<template>
      <div ref="app">
          <Person></Person>
      </div>
    </template>
    
    <script>
    import Person from './components/Person.vue'
    export default {
      name:'App',
      data() {
          return {
              
          };
      },
      components:{
          Person,
      },
      mounted(){
        console.log(this.$refs.app);
      }
    };
    </script>
    
    <style lang="scss" scoped>
    
    </style>

组件上的 ref

ref引用也可以被用在一个子组件上。这种情况下引用中获得的值是组件实例：

<template>
      <div ref="app">
          <Person ref="p"></Person>
      </div>
    </template>
    
    <script>
    import Person from './components/Person.vue'
    export default {
      name:'App',
      data() {
          return {
              
          };
      },
      components:{
          Person,
      },
      mounted(){
        console.log(this.$refs.p.name);
      }
    };
    </script>
    
    <style lang="scss" scoped>
    
    </style>

如果一个子组件使用的是选项式 API ，被引用的组件实例和该子组件的 `this` 完全一致，这意味着父组件对子组件的每一个属性和方法都有完全的访问权。这使得在父组件和子组件之间创建紧密耦合的实现细节变得很容易，当然也因此，应该只在绝对需要时才使用组件引用。大多数情况下，你应该首先使用标准的 props 和 emit 接口来实现父子组件交互。

`expose` 选项可以用于限制对子组件实例的访问：

<template>
        
        <p>姓名:{
       {name}}</p>
        <p>年龄:{
       {age}}</p>
    </template>
    <script>
       //组件交互相关的js代码
       export default{
                name:'Person',
                expose:["name"],
                data(){
                    return {
                        name:'张三',
                        age:21
                    }
                },
       }
    </script>
    
    <style>
       /*组件的样式 */
       p{
        color:red;
       }
    </style>

在上面这个例子中，父组件通过模板引用访问到子组件实例后，仅能访问 `name`。

[c4cdccc01ccf4efb890925c9c0dfca26.png]: https://img-blog.csdnimg.cn/c4cdccc01ccf4efb890925c9c0dfca26.png
[e00b597ebcec4a93b301eaad3159e24e.png]: https://img-blog.csdnimg.cn/e00b597ebcec4a93b301eaad3159e24e.png
[3e2df36bf0ac496989806dd3f8401dad.png]: https://img-blog.csdnimg.cn/3e2df36bf0ac496989806dd3f8401dad.png
[Vue CLI]: https://cli.vuejs.org/zh
[Download _ Node.js]: https://nodejs.org/en/download/
[3b26902631d34b07b47dc6895a36d48d.png]: https://img-blog.csdnimg.cn/3b26902631d34b07b47dc6895a36d48d.png
[728c0f6593f14b55ad94d109e41bc172.png]: https://img-blog.csdnimg.cn/728c0f6593f14b55ad94d109e41bc172.png
[2f02575cb1894923b30d88fd02229fa9.png]: https://img-blog.csdnimg.cn/2f02575cb1894923b30d88fd02229fa9.png