Vue之组件（基础、分类、命名）

谁借莪１个温暖的怀抱￠ 2023-05-31 03:00 27阅读 0赞

## 前言 ##

*  组件（ Component ）是 Vue.js 最核心的功能，也是整个框架设计最精彩的地方，当然也是最难掌握的。
 *  接下来会由浅入深地学习组件的全部内容，并通过几个案例练习熟练使用 Vue 组件。
 *  正式讲解组件前，先看个场景，了解下为什么学习组件？

## 场景举例 ##

*  有人会问：为什么学习组件，作用是什么？
 *  接下来看个场景 下面图中是个很常见的聊天界面，有些标准的控件，比如右上角的关闭按钮、输入框、发送按钮等。
 *  你可能要问了，这有什么难的，不就是几个 div input 吗？  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]
 *  产品经理：现在需求升级了，这几个控件还有别的地方要用到。
 *  **程序员**：没问题，复制粘贴呗。
 *  **产品经理**：要求输入框要带数据验证，按钮的图标支持自定义
 *  **程序员**：这样吧，用 JavaScript 封装后一起复制吧。  
    … …等到项目快完结，后期项目交接前两天
 *  **产品经理**：所有使用输入框的地方，都要改成支持回车键提交。
 *  **程序员**：好吧，给我一天的时间，加班一个一个加上去。  
    ![在这里插入图片描述][20191022152201845.png]
 *  **上面的需求虽然有点变态，但却是业务中很常见的，那就是一些控件、 JavaScript 功能的复用。**
 *  没错， Vue.js的组件就是提高**重用性**的，让代码可复用，当学习完组件后，上面的问题就可以轻松搞定了，再也不用害怕产品经理的奇随需求。

## 组件注册 ##

*  **回顾下创建 Vue 实例的方法**  
    ![在这里插入图片描述][20191022152337533.png]
 *  组件Component与之类似，需要注册后才可以使用。注册有全局注册和局部注册两种方式。
 *  ①全局组件：任何Vue 实例都可以使用
 *  ②局部组件：只有在该实例作用域下有效（对比全局与局部变量记忆）

## 组件注册-全局 ##

*  全局注册组件语法：  
    ![在这里插入图片描述][20191022152546497.png]
 *  my-component 就是注册的组件自定义标签名称，推荐使用小写加减号分割的形式命名（即kebab-case短横线分隔命名法，此外还有PascalCase首字母大写命名即大驼峰法）。
 *  要在父实例中使用这个组件，必须要在**实例创建前注册**，之后就可以用\*\*<组件名></组件名>\*\*形式来使用组件了，示例代码如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]
 *  此时打开页面还是空白的，因为注册的组件没有任何内容，在组件选项中添加 template（模板）就可以显示组件内容了。
 *  示例代码如下  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]
 *  全局组件注册步骤小结：
    
     *  ①注册组件component并命名
     *  ②添加模板template内容
     *  ③通过自定义组件名调用组件  
        ![在这里插入图片描述][20191022152902351.png]
 *  template模板语法要求：
 *  template的 DOM 结构必须被一个元素包含， 如果直接写成 “这里是组件的内容”， 不带`“<div></div>”`等根元素是无法渲染的。  
    ![在这里插入图片描述][20191022153722269.png]

## 组件命名 ##

*  定义组件名的方式有两种：kebab-case和PascalCase
 *  （1）kebab-case短横线分隔命名  
    ![在这里插入图片描述][20191022153810377.png]
 *  当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用/调用这个自定义元素时使用 kebab-case，例如 。  
    ![在这里插入图片描述][20191022153825469.png]
 *  （2）PascalCase首字母大写命名即大驼峰  
    ![在这里插入图片描述][20191022153845329.png]
 *  当使用 PascalCase (首字母大写命名) 定义组件，在html文档里引用时必须使用kebab-case短横线分隔命名才生效，否则报错（原理：HTML对大小写不敏感、JS对大小写敏感）。
 *  因此，文档引用时为  
    ![在这里插入图片描述][20191022153906337.png]

## 组件注册-局部 ##

*  在Vue 实例中，使用 components选项可以局部注册组件，注册后的组件只有在该实例作用域下有效。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]
 *  由上例可以看出，组件components添加模板component有两种方式  
    ①直接绑定添加如下图： ![在这里插入图片描述][20191022154113150.png]  
    ②指向已有模板对象如下图：  
    ![在这里插入图片描述][20191022154126770.png]

## 全局VS局部 ##

*  全局注册组件通过Vue.component语法，全局注册的组件可以用在任何Vue 根实例 (new Vue) 的模板中。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]
 *  全局注册有时是不够理想，例如即便你已经不再使用一个组件了，它仍然会被包含在最终的构建结果中，影响性能。
 *  注意：局部组件只有在**当前实例作用域**下有效  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]

## 组件注册-局部 ##

*  局部组件也可以同时注册多个，引用时一一对应即可![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]  
    ![在这里插入图片描述][2019102215440527.png]  
    上图示例中使用了JS的模板字符串\`\`来让多行的模板更易读

## 组件嵌套 ##

*  组件也可以嵌套其他组件  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]  
    此时会发现，使用Vue组件嵌套可以打破HTML语法限制，文本块级标签可以嵌套块级标签。  
    **补充：CSS元素类型转换限制**
 *  （1）注册引用步骤
 *  ①全局组件：在创建实例前注册，注册后即可直接引用  
    ![在这里插入图片描述][20191022154606508.png]
 *  ②局部组件：在components选项内注册  
    ![在这里插入图片描述][20191022154612710.png]
 *  （2）作用域
    
     *  全局组件：全局都可以直接引用
     *  局部组件：只有在当前实例作用域下有效

## HTML文档限制||DOM解析限制 ##

**问题：**

*  UVue组件模板在某些情况下会受到 HTML 的限制，比如`<table>`内规定只允许是`<tr>、<td>、<th>`等表格元素，所以`<tabe>`内直接使用组件是无效的。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]  
    ![在这里插入图片描述][20191022154946605.png]
 *  方案：可以使用特殊的**is属性**来挂载组件。  
    ![在这里插入图片描述][20191022155029173.png]  
    ![在这里插入图片描述][20191022155035358.png]  
    ![在这里插入图片描述][20191022155042196.png]

tbody在渲染时会被替换为组件的内容。常见的限制元素还有<select>

![在这里插入图片描述][20191022155141594.png]  
![在这里插入图片描述][20191022155146984.png]  
**解析 DOM 模板时的注意事项**

*  需要注意的是如果从以下来源使用模板的话，HTML文档限制是不存在的：

①组件字符串模板 (例如：template: `...`)

②单文件组件 (.vue)，后序课程工程化讲解

③<script type="text/x-template">，关于字符串模板，下节做介绍。

## 组件选项-data数据项 ##

*  除了 template 模板选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 computed、methods 等。
 *  但是在使用 data 和实例稍有区别， **组件的data必须是函数，且必须将数据 return出去。**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]

## 组件选项-数据选项与复用 ##

*  JS对象是引用关系，所以如果return出的对象引用了外部的一个对象，那这个对象就是共享的，任何一方修改都会同步，如下所示。
 *  （引用关系，会产生浅拷贝，互相影响）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]
 *  组件使用了3次，但是点击任意， 3个的按钮的数字都会+1 ，这是因为组件 data引用的是外部的对象。
 *  这肯定不是我们期望的效果，所以接下来给组件返回一个新的data 对象来独立  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]  
    **这样，点击每个按钮就互不影响了，完全达到复用的目的。**
 *  当点击按钮时，每个组件都会各自独立维护它的 count。因为每用一次组件，就会有一个它的新实例被创建。

# 总结 #

*  总结：
 *  （1）注册位置：全局组件必须在实例化之前注册，局部组件需要在components选项内注册。
 *  （2）作用域：全局组件：全局都可以直接引用；局部组件：只有在当前实例作用域下有效。
 *  （3）HTML文档限制：组件模板在某些情况下会受到 HTML 的限制，使用特殊的is属性来挂载组件。
 *  （4）除了 template 模板选项外，组件中还可以像 Vue 实例那样使用其他的选项，比如 computed、methods  
    等。但是在使用 data 和实例稍有区别， 组件的data必须是函数，且必须将数据 return出去。
 *  （5）组件复用：可以将组件进行任意次数的复用。
 *  （6）data选项再次强调：组件的data 并不是像原来一样直接提供一个对象，取而代之的是，一个组件的 data  
    选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝
 *  （7）因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如  
    data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70]: /images/20230531/3404c6db5d8b48c8aa075baeace96d60.png
[20191022152201845.png]: /images/20230531/a692c8e8e09e4dbb8840a59b86a3ef09.png
[20191022152337533.png]: /images/20230531/fce860ceff234901920816219fba2de0.png
[20191022152546497.png]: /images/20230531/c482bb12596f4318806c370be9d23021.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 1]: /images/20230531/43bbecce77594180ba31e95b76f5069d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 2]: /images/20230531/144a97f2c51f498493175d04e1b46eee.png
[20191022152902351.png]: /images/20230531/f8b562eb33874955ad4790f6369e9b3b.png
[20191022153722269.png]: /images/20230531/3a09550143834d2b9d7058e8e77543c4.png
[20191022153810377.png]: /images/20230531/445560a05c6044619bdfedb38fdb2b36.png
[20191022153825469.png]: /images/20230531/c86ea5b869324815b9b73f2aedfc24bc.png
[20191022153845329.png]: /images/20230531/fd0d14d796c1439f97d7e59d4c947e6e.png
[20191022153906337.png]: /images/20230531/12d742e6f72c41a4aa384fe333d52d3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 3]: /images/20230531/e37740cc2c654c438081ebe61099770b.png
[20191022154113150.png]: /images/20230531/c4ff99d979314e3a881772f09187ca15.png
[20191022154126770.png]: /images/20230531/2770fd0c0f7b4c77a6863177d8be6e4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 4]: /images/20230531/a298c95c06534181972b00828d4cca92.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 5]: /images/20230531/a68121815fd74428934bd6f37b995103.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 6]: /images/20230531/eba81d82ed674ca5a1394f69b90ff261.png
[2019102215440527.png]: /images/20230531/377a0a2c2a9b4a0d91d8854707ffd795.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 7]: /images/20230531/c7410ee2f8d84b9481b66103186dbdcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 8]: /images/20230531/35410fdb0c4c4a7887f5270a9d74396b.png
[20191022154606508.png]: /images/20230531/0c863fc3d1bc40d1bb2b8d52eb5b0edb.png
[20191022154612710.png]: /images/20230531/38d3656d8b2945cd88bb23e4e2474f43.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 9]: /images/20230531/6099cc0b3da749dfb8cd65ab77026cef.png
[20191022154946605.png]: /images/20230531/84357a71ec624d00be1e9aade3faf992.png
[20191022155029173.png]: /images/20230531/af76997046574659a9019c0724c25ac4.png
[20191022155035358.png]: /images/20230531/6a5d5d6afc1a4c6ba29d81d51be5d8cd.png
[20191022155042196.png]: /images/20230531/c5caa72f387549d99913477db09844b1.png
[20191022155141594.png]: /images/20230531/3413058e20734b6db454ff86ff236a18.png
[20191022155146984.png]: /images/20230531/04eecaa3d7c24a29befa3f96c80c03fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 10]: /images/20230531/50482cbb85a545bb8df50a5315b20d41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 11]: /images/20230531/87ccbfcbbbf144c2a1fa83bda8553ab7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BlaWppYWppbmc_size_16_color_FFFFFF_t_70 12]: /images/20230531/c992fccededc46edbbbf5f630d8bbcf0.png