Vue的组件(注册、局部、组件复用、props、emit、生命周期)全解

╰半夏微凉° 2024-03-26 15:23 90阅读 0赞

#### 文章目录 ####

*  前言
 *  知识点
 *   *  组件注册
     *  局部组件
     *  组件复用
     *  组件间通信
     *  props 类型检测
     *  子父组件通信之 emit
     *  动态组件
     *  生命周期函数

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

## 前言 ##

> Vue 支持模块化和组件化开发，可以将整个页面进行模块化分割，低耦合高内聚，使得代码可以在各个地方使用。

## 知识点 ##

*  组件注册
 *  组件复用
 *  组件通信
 *  动态组件
 *  实例生命周期
 *  生命周期示意图

### 组件注册 ###

> 组件分为全局组件和局部组件。

**全局注册**

> Vue.component() 方法注册全局组件。

![在这里插入图片描述][e09d37fae4754d2184e22a33c89a347c.png]

### 局部组件 ###

> 在父级 components 对象中声明，局部组件只有它的父级才能调用。

var header = new Vue({
      el: "#header",
      // 子组件必须声明后使用，不然不能起效
      components: {
        "syl-header": childComponent,
      },
    });

> 局部组件使用：

<!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>vue</title>
        <script src="vue.min.js"></script>
      </head>
    
      <body>
        <div id="header">
          <syl-header></syl-header>
        </div>
        <div id="mid">
          <syl-mid></syl-mid>
        </div>
        <script>
          // 头部组件
          var childComponent = {
          
            template: "<h2>我是实验楼局部组件header，只有我们父级才能调用</h2>",
          };
          // 中间部分组件
          var childComponent2 = {
          
            template: "<h2>我是实验楼局部组件mid，只有我们父级才能调用</h2>",
          };
          // header vm
          var header = new Vue({
          
            el: "#header",
            // 子组件必须声明后使用，不然不能起效
            components: {
          
              "syl-header": childComponent,
            },
          });
          var mid = new Vue({
          
            el: "#mid",
            // 子组件必须声明后使用，不然不能起效
            components: {
          
              "syl-mid": childComponent2,
            },
          });
        </script>
      </body>
    </html>

![在这里插入图片描述][c5609eaf83f84cf6b7a645e84e5cb057.png]

### 组件复用 ###

> 组件的优点就在于能够复用，一次代码编写，整个项目受用。

`注意： 复用组件内的 data 必须是一个函数，如果是一个对象（引用类型），组件与组件间会相互影响，组件数据不能独立管理。`

![在这里插入图片描述][776e06d3d3ac4657b8b873a8d9f1590f.png]

### 组件间通信 ###

> 组件之间也面临着数据流动，也可以进行通信。下面我们来学习组件间的通信。

> **父子组件之 props**  
> props 是一个单向的数据流，只允许父组件向子组件传值，值类型可以是一个数值、字符、布尔值、数值、对象，子组件需要显式地用 props 选项声明 “prop”。

`注意：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 需要使用其等价的 kebab-case (短横线分隔命名) 命名，如下面例子：`

![在这里插入图片描述][0515845e880e4fb6b07c44f7f3f52946.png]

### props 类型检测 ###

> 到这里，我们只看到了以字符串数组形式列出的 prop：

props: ["postTitle"];

> 但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：

props:{
        title:String,
        id:Number,
        content:String
    }

### 子父组件通信之 emit ###

> 上面提到 props 实现父向子组件传递数据是单向流的，那么，如何实现子组件向父组件通信呢？这里要使用自定义事件 emit 方法，通过自定义事件来由下到上的数据流动。  
> 语法如下：

this.$emit('自定义事件名'，参数)

<!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>vue</title>
        <script src="vue.min.js"></script>
      </head>
    
      <body>
        <div id="app">
          <child-component v-on:send-msg="getMsg"></child-component>
        </div>
        <script>
          // 定义一个子组件，template 绑定 click 事件
          // 当 click 事件触发就使用 emit 自定义一个事件 send-msg，传入参数 “我是子组件请求与你通信”
          // $emit('send-msg','我是子组件请求与你通信')
          // 子组件标签上绑定自定义事件 send-msg，并绑定上父级的方法 getMsg，即可完成了子父组件通信
          // <child-component v-on:send-msg="getMsg"></child-component>
          Vue.component("child-component", {
          
            template: `
                    <button v-on:click="$emit('send-msg','我是子组件请求与你通信')">
                    Click me
                    </button>
                    `,
          });
          var app = new Vue({
          
            el: "#app",
            methods: {
          
              getMsg: function (msg) {
          
                // 弹出子组件传递的信息
                alert(msg);
              },
            },
          });
        </script>
      </body>
    </html>

![在这里插入图片描述][20b169240e4544ceb5a3a8c67677fe11.png]  
**子组件向父组件数据传递套路：**

*  第一步：子组件绑定事件。
 *  第二步：子组件绑定事件触发，使用 $emit 创建自定义事件并传入需要传值给父组件的数据。
 *  第三步：在子组件标签上 用 v-on 绑定自定义事件，在父组件中声明自定义事件处理的方法。
 *  第四步：父组件方法，接受自定义事件传的参数，就完成了整个由下到上的数据流。

### 动态组件 ###

> 上面例子我们传值都是直接传的固定值，其实动态传值我们也支持，生成动态组件，使用 v-bind 动态绑定 props 值。

<!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>vue</title>
        <script src="vue.min.js"></script>
      </head>
    
      <body>
        <div id="app">
          
          <child-component
            :name="name"
            :age="age"
            :height="height"
          ></child-component>
          <child-component
            :name="name+'2'"
            :age="age+1"
            :height="height"
          ></child-component>
        </div>
        <script>
          // 定义一个子组件
          Vue.component("child-component", {
          
            // 使用属性类型检测
            props: {
          
              name: String,
              age: Number,
              height: String,
            },
            template: `
                <ul>
                    <li>{
           {name}}</li>
                    <li>{
           {age}}</li>
                    <li>{
           {height}}</li>
                </ul>
                `,
          });
          var app = new Vue({
          
            el: "#app",
            data() {
          
              return {
          
                name: "syl",
                age: 20,
                height: "180cm",
              };
            },
          });
        </script>
      </body>
    </html>

![在这里插入图片描述][1c036c8d4bb642ebbf5efd6793844835.png]

### 生命周期函数 ###

> 接触了组件后，应该需要了解整个实例的生命周期是怎么样的，有哪些钩子函数，在哪个阶段我们能操作什么，实例在不同的阶段都会抛出不同的钩子函数，方便开发者能够精确的控制整个流程。

<!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>vue</title>
        <script src="vue.min.js"></script>
      </head>
    
      <body>
        <div id="app">
          <button @click="handleClick">{
       {name}}</button>
        </div>
        <script>
          var app = new Vue({
          
            el: "#app",
            data() {
          
              return {
          
                name: "syl",
              };
            },
            methods: {
          
              handleClick: function () {
          
                this.name = "syl syl";
              },
            },
            beforeCreate() {
          
              alert(
                "在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用"
              );
            },
            created() {
          
              alert(
                "在实例创建完成后被立即调用,挂载阶段还没开始，$el 属性目前不可见"
              );
            },
            beforeMount() {
          
              alert("在挂载开始之前被调用：相关的 render 函数首次被调用");
            },
            mounted() {
          
              alert("el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子");
            },
            beforeUpdate() {
          
              alert("数据更新时调用");
            },
            updated() {
          
              alert("组件 DOM 已经更新");
            },
            beforeDestroy() {
          },
            destroyed() {
          },
          });
        </script>
      </body>
    </html>

**这么多钩子函数我们经常主要用到有：**

*  1.created 钩子函数内我们可以进行异步数据请求。

created() {
        fetch('url')
        .then(function(response) {
            console.log(response)
        })
    }

*  2.mounted 我们可以直接操作元素 DOM 了，但是并不推荐这样做，不利于性能提升。

**生命周期示意图**

> 一个 Vue 实例从创建到销毁的完善周期，以及相关周期，向外抛出的钩子函数。  
> ![请添加图片描述][d803aaf6bf464379ac041e636af03afb.png]

[e09d37fae4754d2184e22a33c89a347c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/daf18744fc354934a8cbd26a65e22189.png
[c5609eaf83f84cf6b7a645e84e5cb057.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/24b243617276419ca4902cfab75010c9.png
[776e06d3d3ac4657b8b873a8d9f1590f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/19e8aec43a294a2a82595617500dfdcc.png
[0515845e880e4fb6b07c44f7f3f52946.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/d79f233e870a45f4960a5d046a5cee65.png
[20b169240e4544ceb5a3a8c67677fe11.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/aae62b9800f949b2a22d1fc47ee740d8.png
[1c036c8d4bb642ebbf5efd6793844835.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/1e51f45baf0d4f91adf2ff5d34bdf054.png
[d803aaf6bf464379ac041e636af03afb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/26/9e6af70ac1bc41b9afdc3516922aad3f.png