Vue.js note6（组件component的使用&全局组件&局部组件）

浅浅的花香味﹌ 2023-02-27 12:08 17阅读 0赞

### 1、什么是组件 ###

我们知道，vue的核心是数据驱动与组件化，所以组件是非常重要的。那么组件是什么呢？

**组件的概念**：组件即自定义控件，是Vue.js最强大的功能之一  
**组件的用途**：组件能够封装可重用ui代码，扩展HTML标签功能  
**组件的本质**：自定义标签  
**组件的分类**：全局组件、局部组件

全局组件的作用域：不同作用域内均可使用  
局部组件作用域：只在定义该组件的作用域内可以使用

**组件的类型**：

1.  页面级别的组件 **：** 页面级别的组件，通常是views目录下的`.vue`组件，是组成整个项目的一个大的页面。一般不会有对外的接口。
2.  业务上可复用的基础组件 **：** 在业务中被各个页面复用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用。
3.  与业务无关的独立组件 **：** 与业务功能无关的独立组件。这类组件通常是作为基础组件，在各个业务组件或者页面组件中被使用。目前市面上比较流行的ElementUI和iview等中包含的组件都是独立组件。如果是自己定义的独立组件，比如富文本编辑器等，通常写在utils目录中。

### 2、组件的命名规则 ###

不管是全局组件或者局部组件，在命名时，都要遵循一个规则：

*  （1）组件名一般是全小写，比如组件命名`com`，调用时`<com></com>`。
 *  （2）组件名有大写字符，比如驼峰式命名法，那么在调用的时候用`-`来代替大写字母。  
     比如，组件名：`myText`；调用：`<my-text></my-text>`。因为W3C要求的是，HTML标签必须闭合，且标签都小写。
 *  （3）组件名有连字符，比如命名为`my-text`，调用的写法同上。
 *  （4）组件名有下划线，比如组件命名`com_text`，调用时`<com_text></com_text>`。

建议组件名全部小写，因为可以一定程度上避免和当前或未来HTML元素相冲突。

我还弱弱的发现了一个小问题，就是组件调用的时候，不写闭合标签也OK。但是不符合W3C规范，最好不要那样写。

### 3、组件里template的设置方式 ###

目前我遇到的有两种方式：  
（1）把标签直接以字符串的形式写入template后面，如 `template：'<div></div>'`  
（2）引用template标签里的内容，如`template：'#tem'`（template标签的id=“tem”）

这有篇文章解释了template在vue中的运行原理：[关于template标签用法总结(含vue中的用法总结)][template_vue]

### 4、组件里数据、函数的定义语法 ###

**数据的定义：** 需以函数返回值的形式定义数据。

data：function(){          
    	return {a:1,b:2}		
    }

现在学了组件了，没啥太大问题的话，以后程序需要的模型数据应该都会放在组件里面了。而且，组件里面的变量只能组件用，出了该组件自定义标签的作用域，就用不了了；其他组件的变量甚至是父实例的变量，如果不使用一定的手段，也无法使用。

**函数的定义：** 函数名一般不加双引号比如`com(){}`，但也可以`"com":function(){}`，甚至`"com"(){}` 。

methods:{
       函数名：function(){}
    }

### 5、组件的调用 ###

组件本质为标签，调用方式与调用标签相同。  
调用方法为：<组件名></组件名>

### 6、全局组件 component ###

**语法：**

Vue.component(‘name’, {
         	   template: ‘<div></div>’
    });

**全剧组件定义的位置：** 创建实例前。  
**全局组件的作用域：** 全局范围内均可调用。

小栗子1：写一个简单的全局组件。

<div id="demoSky">
        
        <com></com>
        <com></com>
    </div>
    <script> Vue.component("com",{ template:"<div>我是全局组件</div>" }) new Vue({ el:"#demoSky", }) </script>

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

如果组件中有多个标签呢？ 那必须有一个**父容器**进行包裹。

<div id="demoSky">
        <com-two></com-two>
    </div>
    <script> Vue.component("comTwo",{ template:"<div><div>标签1</div><div>标签2</div></div>"//总之最外层就一个标签 }) new Vue({ el:"#demoSky", }) </script>

在template中写html标签，这样写很麻烦对不对，都没有代码提示啥的，那还有其他办法吗？还真有，vue提供了**外部模板引入**的方式，这涉及到了HTML的template标签。

那template标签是啥，没接触过vue前我都不记得。官方是这么来解释HTML的template标签的：

> HTML内容模板（`<template>`）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用JavaScript实例化。  
>   
> 将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理`<template>`元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

按我的理解来说，template标签就是一个模板，把HTML页面中的重复结构拿出来，供其他部分使用。

<div id="demoSky">
        <com-three></com-three>
    </div>
    
    
    <template id="moduleThree">
        <div>
            <p>我是外部模板内容  1</p>
            <p>我是外部模板内容  2</p>
            <p>我是外部模板内容  3</p>
        </div>
    </template>
    
    <script> Vue.component("comThree",{ template:"#moduleThree" // 引入外部模板 }) new Vue({ el:"#demoSky", }) </script>

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

### 7、局部组件 components ###

**语法：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]  
**定义位置：** 实例配置项`components`中定义。  
**局部组件的作用域：** 定义在vue实例中，只能在当前实例范围内生效。

写个局部组件小栗子：注意，即便组件定义在vue实例中，正常情况下，组件的变量等内容与实例不互通。

<div id="demoSky">
      <com></com>
    </div>
    
    <template id="tem">
        <div>
            <p>我是局部组件，不使用变量</p>
            <p>{
       {text}}</p>
            <p>{
       {fushili}}</p>
        </div>
    </template>
    
    <script> new Vue({ el:"#demoSky", data:{ fushili:"我是实例中的变量", }, methods:{ }, // 定义局部组件 components:{ // 组件的名字 com:{ template:"#tem", data(){ return{ text:"我是局部组件的变量text" } } } } }) </script>

结果打印出来如下，是不是没有显示实例的变量------别说，还真没显示。  
![在这里插入图片描述][2020071715374310.png]

**提个问题：** 如果vue实例的变量与组件的变量名字一样了的话，不会冲突对吧？ 对。

<div id="demoSky">
        {
       {same}}
        <com></com>
    </div>
    
    <template id="tem">
        <div>
            <p>{
       {same}}</p>
        </div>
    </template>
    
    <script> new Vue({ el: "#demoSky", data: { same: "实例中的same变量" }, components: { com: { template: "#tem", data() { return { same: "组件中的same变量" } } } } }) </script>

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

### 总结： ###

学完了局部组件之后 。。。  
实例中：el 、data、methods、watch、computed、fliters、components、8个钩子方法  
全局：filter、component、

[template_vue]: https://blog.csdn.net/u010510187/article/details/100356624
[20200717143227564.png]: /images/20230209/aac0272ee7c940cdb5551306c5cd05bf.png
[20200718160004552.png]: /images/20230209/0f9d6a7d4f894c6f87a3e3245e8fa7a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200718115419460.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5NzMyMQ==,size_16,color_FFFFFF,t_70
[2020071715374310.png]: https://img-blog.csdnimg.cn/2020071715374310.png
[20200718164114616.png]: https://img-blog.csdnimg.cn/20200718164114616.png