Vue.js 2 —组件（Component）化编程

我不是女神ヾ 2023-10-14 15:47 122阅读 0赞

## 一、**模块与组件** ##

**模块**

1. 理解 : 向外提供特定功能的 js 程序, 一般就是一个 js 文件

2. 为什么 : js 文件很多，很复杂

3. 作用 : 复用 js, 简化 js 的编写, 提高 js 运行效率

**组件**

组件是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树 ：

![9fae6b6d7e814398817873d1941acf33.png][]

1. 理解 : 用来实现局部(特定)功能效果的代码集合(html /css /js /image …..)

2. 为什么 : 一个界面的功能很复杂

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

## **二、模块化与组件化** ##

![27aef489273047a380b803c372572a83.png][]

**模块化**

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

**组件化**

![66d10745d59940b19b12102667a800d1.png][]

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用。

## 三、组件组成和引用 ##

![5f19fe35ac5a498d810a07147bab222c.png][]

**非单文件组件**

1. 模板编写没有提示

2. 没有构建过程, 无法将 ES6 转换成 ES5

3. 不支持组件的 CSS

4. 真正开发中几乎不用

**单文件组件**

组件最大的优势就是可复用性，当使用构建步骤时，我们一般会将Vue组件定义在一个单独的 .vue文件中，这被叫做单文件组件(简称SFC)

![95e4e9d2905b4b22858b29910848c03b.png][]

**一个.vue 文件的组成(3 个部分)**

1. 模板页面
    <template>
    页面模板
    </template>2. JS 模块对象
    <script>
    export default {
    data() {return {}},
    methods: {},
    computed: {},
    components: {}
    }
    </script>
    3. 样式
    <style>
    样式定义
    </style>
    2.3.2. 基本使用
    1. 引入组件
    2. 映射成标签
    3. 使用组件标签

**组件引用**

![ad1bef153d7249b198dca3803e339eaf.png][]

![6e236cee3e2a4c06854e743bd597f757.png][]

## 四、组件嵌套关系 ##

![1b012035f06a4ec7bdd0e3cb851759af.png][]

![268be7d42ee24a1c8ede2970b33d07a8.png][]

## ![313b44ee5d57426581cc7f9f142d0edf.png][] ##

![d65274d44d0f4cc6a82369a126c078c4.png][]

![070fea88d23e4c0aa966474047ba6126.png][]

![3e40bd4c32b74cb088178424cae7af8a.png][]

## 五、组件注册方式 ##

一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式 : 全局注册 和 局部注册

![158abf8c54d34680ba0c4e3cd14fdb31.png][]

![b9cba8b5e6b94c4ab6ae6fbfd5a14e32.png][]

![1bff620921c54f848dce83e4ce7db716.png][]

## 六、组件传输数据（props） ##

![cd480216ece4418facd2169083cd5cf8.png][]

组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的  
传递数据的解决方案就是 props

![f03b33b12567492eba03bb5e37410d6d.png][]

### 组件动态数据传递 ###

![d1fec9dfdfc04b46847fe074e46e569b.png][]

![baa7258642864edca6adef80c46da1ba.png][]

### **组件传递多种数据类型** ###

![81a5b5aaa4df458d819e3ccde9ef0da5.png][]

通过props传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如:数字、对象、数组等但实际上任何类型的值都可以作为props的值被传递

![617b227d4349477fb0598c4971918230.png][]

![e651df8323f2468eacdfae813582d7c9.png][]

![fd6a74361aa34c64bf28e1ce98fe1df6.png][]

![54112767657d4ea5ad13e54ebf6ff909.png][]

![da5dda2a930c4446a7890f243df5699d.png][]

![eb3d94a6d5804240a23b275e077d5444.png][]

### 通过props传递函数实现子传父 ###

![5bcef175a6d84ac2aae123186f1bd07d.png][]

![27a4d120a0d4499c9dd9ea6c0776ed08.png][]

### 组件传递Props效验 ###

![cb8a034e62be4996885de5838cfe3ab7.png][]

Vue组件可以更细致地声明对传入的props的校验要求

<template>
        <h3>prop传递数据</h3>
        <p>{
       { title }}</p>
        <p>age={
       { age }}</p>
        <ul>
            <li v-for="(item,index) in names" :key="index">{
       {item}}</li>
        </ul>
    </template>
    
    <script>
    export default {
        name:"MyComponent",
        props:{
            title:{
                type:String,
                default:""
            },
            age:{
                type:Number,
                default:0
            },
            names:{
                type:Array,
                // 数组和对象必须使用函数进行返回
                default:function(){
                    return []
                }
            }
        }
    }
    </script>
    <style scoped>
    </style>

![cb6449608e7e43c8908dbfedae549ca6.png][] ![7dfd3632adfd44d19a4ba0ab8d5e1a3d.png][]

`props`校验是在Vue.js中用于验证和约束组件接收的数据类型和默认值的机制。在上述代码中，`props`对象定义了三个属性：`title`、`age`和`names`，每个属性都有指定的数据类型和默认值。

*  `title` 属性的类型为字符串 (`String`)，默认值为空字符串 (`""`)。
 *  `age` 属性的类型为数字 (`Number`)，默认值为0。
 *  `names` 属性的类型为数组 (`Array`)，默认值为一个空数组 (`[]`)。

这样做的目的是为了确保父组件传递给子组件的数据满足特定的类型要求，并提供合适的默认值以防止意外错误。对于 `names` 属性，`default` 使用的是一个函数来返回默认的数组，这是因为在Vue中，如果使用对象或数组作为默认值，需要使用一个函数来返回新的对象或数组实例，以避免数据共享。

### 组件事件实现子给父传递数据 ###

![dbc1606044e44265b2954cc0d35b9fcc.png][]

![13f32241246541458f3da3e18cfe0f3f.png][]

在组件的模板表达式中，可以直接使用 $emit方法触发自定义事件触发自定义事件的目的是组件之间传递数据。（子给父传数据）

![13da622bb8744b40a5de5887f02805b9.png][]

![e2c6bd03d716480986fa5ef84734ca99.png][]

<template>
        <h3>自定义事件传递数据</h3>
        <button @click="sendClickHandle">点击传递</button>
    </template>
    
    <script>
    export default {
        name:"MyComponent",
        data(){
            return{
                message:"我是MyComponent数据"
            }
        },
        methods:{
            sendClickHandle(){
                // 参数1：字符串:理论上是随便的，但是需要具有意义
                // 参数2：传递的数据
                this.$emit("onEvent",this.message)
            }
        }
    }
    </script>
    
    <style scoped>
    </style>

### 组件事件配合使用v-model ###

![6b93b0b578f842a89864950e5eb63fd1.png][]

![1acc4e16f65143ff88705bfc78fad4ec.png][]

### 透传属性 （attribute） ###

“透传attribute”指的是传递给一个组件，却没有被该组件声明为props或emits的attribute或者v-on事件监听器。最常见的例子就是class、style和id  
当一个组件以单个元素为根作渲染时，透传的attribute会自动被添加到根元素上

## 七、组件生命周期 ##

![e98189b8d0b14b7e935aaa4b8db4fa5a.png][]

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会（不用调用）在特定阶段运行自己的代码 。

![2e533efe40074115abb8f40aee86e6c0.png][]

<template>
        <h3>生命周期函数</h3>
        <p>{
       { message }}</p>
        <button @click="message='数据'">点击</button>
    </template>
    <script>
    
    export default {
        data(){
            return{
                message:""
            }
        },
        beforeCreate(){
            console.log("beforeCreate:组件创建之前");
        },
        created(){
            console.log("created:组件创建完成");
        },
        beforeMount(){
            console.log("beforeMount:渲染之前");
        },
        mounted(){
            console.log("mounted:组件渲染完成");
            // 把网络请求放到这里
        },
        beforeUpdate(){
            console.log("beforeUpdate:组件更新之前");
        },
        updated(){
            console.log("updated:组件更新之后");
        },
        beforeUnmount(){
            console.log("beforeUnmount:组件卸载之前");
            // 卸载之前，把消耗性能的处理都干掉
            // 定时器
        },
        unmounted(){
            console.log("unmounted:组件卸载之后");
        }
    }
    
    
    </script>

![4343645a120140749a0904d90ffb4ec5.png][]

![00a4a286f3c544bc88c38c2591fa4b92.png][]

![f221479ee9ea4266a4e782e38914d252.png][]

![8f1a0f8771d54971bf3dc2818e03c2de.png][]

![14d3c2a3edb74546b2033639c19598a8.png][]

[9fae6b6d7e814398817873d1941acf33.png]: https://img-blog.csdnimg.cn/9fae6b6d7e814398817873d1941acf33.png
[27aef489273047a380b803c372572a83.png]: https://img-blog.csdnimg.cn/27aef489273047a380b803c372572a83.png
[66d10745d59940b19b12102667a800d1.png]: https://img-blog.csdnimg.cn/66d10745d59940b19b12102667a800d1.png
[5f19fe35ac5a498d810a07147bab222c.png]: https://img-blog.csdnimg.cn/5f19fe35ac5a498d810a07147bab222c.png
[95e4e9d2905b4b22858b29910848c03b.png]: https://img-blog.csdnimg.cn/95e4e9d2905b4b22858b29910848c03b.png
[ad1bef153d7249b198dca3803e339eaf.png]: https://img-blog.csdnimg.cn/ad1bef153d7249b198dca3803e339eaf.png
[6e236cee3e2a4c06854e743bd597f757.png]: https://img-blog.csdnimg.cn/6e236cee3e2a4c06854e743bd597f757.png
[1b012035f06a4ec7bdd0e3cb851759af.png]: https://img-blog.csdnimg.cn/1b012035f06a4ec7bdd0e3cb851759af.png
[268be7d42ee24a1c8ede2970b33d07a8.png]: https://img-blog.csdnimg.cn/268be7d42ee24a1c8ede2970b33d07a8.png
[313b44ee5d57426581cc7f9f142d0edf.png]: https://img-blog.csdnimg.cn/313b44ee5d57426581cc7f9f142d0edf.png
[d65274d44d0f4cc6a82369a126c078c4.png]: https://img-blog.csdnimg.cn/d65274d44d0f4cc6a82369a126c078c4.png
[070fea88d23e4c0aa966474047ba6126.png]: https://img-blog.csdnimg.cn/070fea88d23e4c0aa966474047ba6126.png
[3e40bd4c32b74cb088178424cae7af8a.png]: https://img-blog.csdnimg.cn/3e40bd4c32b74cb088178424cae7af8a.png
[158abf8c54d34680ba0c4e3cd14fdb31.png]: https://img-blog.csdnimg.cn/158abf8c54d34680ba0c4e3cd14fdb31.png
[b9cba8b5e6b94c4ab6ae6fbfd5a14e32.png]: https://img-blog.csdnimg.cn/b9cba8b5e6b94c4ab6ae6fbfd5a14e32.png
[1bff620921c54f848dce83e4ce7db716.png]: https://img-blog.csdnimg.cn/1bff620921c54f848dce83e4ce7db716.png
[cd480216ece4418facd2169083cd5cf8.png]: https://img-blog.csdnimg.cn/cd480216ece4418facd2169083cd5cf8.png
[f03b33b12567492eba03bb5e37410d6d.png]: https://img-blog.csdnimg.cn/f03b33b12567492eba03bb5e37410d6d.png
[d1fec9dfdfc04b46847fe074e46e569b.png]: https://img-blog.csdnimg.cn/d1fec9dfdfc04b46847fe074e46e569b.png
[baa7258642864edca6adef80c46da1ba.png]: https://img-blog.csdnimg.cn/baa7258642864edca6adef80c46da1ba.png
[81a5b5aaa4df458d819e3ccde9ef0da5.png]: https://img-blog.csdnimg.cn/81a5b5aaa4df458d819e3ccde9ef0da5.png
[617b227d4349477fb0598c4971918230.png]: https://img-blog.csdnimg.cn/617b227d4349477fb0598c4971918230.png
[e651df8323f2468eacdfae813582d7c9.png]: https://img-blog.csdnimg.cn/e651df8323f2468eacdfae813582d7c9.png
[fd6a74361aa34c64bf28e1ce98fe1df6.png]: https://img-blog.csdnimg.cn/fd6a74361aa34c64bf28e1ce98fe1df6.png
[54112767657d4ea5ad13e54ebf6ff909.png]: https://img-blog.csdnimg.cn/54112767657d4ea5ad13e54ebf6ff909.png
[da5dda2a930c4446a7890f243df5699d.png]: https://img-blog.csdnimg.cn/da5dda2a930c4446a7890f243df5699d.png
[eb3d94a6d5804240a23b275e077d5444.png]: https://img-blog.csdnimg.cn/eb3d94a6d5804240a23b275e077d5444.png
[5bcef175a6d84ac2aae123186f1bd07d.png]: https://img-blog.csdnimg.cn/5bcef175a6d84ac2aae123186f1bd07d.png
[27a4d120a0d4499c9dd9ea6c0776ed08.png]: https://img-blog.csdnimg.cn/27a4d120a0d4499c9dd9ea6c0776ed08.png
[cb8a034e62be4996885de5838cfe3ab7.png]: https://img-blog.csdnimg.cn/cb8a034e62be4996885de5838cfe3ab7.png
[cb6449608e7e43c8908dbfedae549ca6.png]: https://img-blog.csdnimg.cn/cb6449608e7e43c8908dbfedae549ca6.png
[7dfd3632adfd44d19a4ba0ab8d5e1a3d.png]: https://img-blog.csdnimg.cn/7dfd3632adfd44d19a4ba0ab8d5e1a3d.png
[dbc1606044e44265b2954cc0d35b9fcc.png]: https://img-blog.csdnimg.cn/dbc1606044e44265b2954cc0d35b9fcc.png
[13f32241246541458f3da3e18cfe0f3f.png]: https://img-blog.csdnimg.cn/13f32241246541458f3da3e18cfe0f3f.png
[13da622bb8744b40a5de5887f02805b9.png]: https://img-blog.csdnimg.cn/13da622bb8744b40a5de5887f02805b9.png
[e2c6bd03d716480986fa5ef84734ca99.png]: https://img-blog.csdnimg.cn/e2c6bd03d716480986fa5ef84734ca99.png
[6b93b0b578f842a89864950e5eb63fd1.png]: https://img-blog.csdnimg.cn/6b93b0b578f842a89864950e5eb63fd1.png
[1acc4e16f65143ff88705bfc78fad4ec.png]: https://img-blog.csdnimg.cn/1acc4e16f65143ff88705bfc78fad4ec.png
[e98189b8d0b14b7e935aaa4b8db4fa5a.png]: https://img-blog.csdnimg.cn/e98189b8d0b14b7e935aaa4b8db4fa5a.png
[2e533efe40074115abb8f40aee86e6c0.png]: https://img-blog.csdnimg.cn/2e533efe40074115abb8f40aee86e6c0.png
[4343645a120140749a0904d90ffb4ec5.png]: https://img-blog.csdnimg.cn/4343645a120140749a0904d90ffb4ec5.png
[00a4a286f3c544bc88c38c2591fa4b92.png]: https://img-blog.csdnimg.cn/00a4a286f3c544bc88c38c2591fa4b92.png
[f221479ee9ea4266a4e782e38914d252.png]: https://img-blog.csdnimg.cn/f221479ee9ea4266a4e782e38914d252.png
[8f1a0f8771d54971bf3dc2818e03c2de.png]: https://img-blog.csdnimg.cn/8f1a0f8771d54971bf3dc2818e03c2de.png
[14d3c2a3edb74546b2033639c19598a8.png]: https://img-blog.csdnimg.cn/14d3c2a3edb74546b2033639c19598a8.png