Vue.js高效前端开发 • 【Vue组件】

你的名字 2022-10-11 01:15 243阅读 0赞

[全部章节 >>>>][Link 1]

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

### 文章目录 ###

*  一、Vue组件介绍
 *   *  1、组件概述
     *  2、组件使用步骤
     *  3、实践练习
 *  一、Vue组件使用
 *   *  1、组件注册
     *  2、组件注册语法糖
     *  3、使用script或template标签
     *  4、组件的el和data选项
     *  5、实践练习
 *  三、组件之间的通信
 *   *  1、父组件和子组件
     *  2、通过props向子组件传递数据
     *  3、实践练习
 *  四、Vue的插槽
 *   *  1、插槽使用
     *  2、作用域插槽使用
     *  3、实践练习
 *  总结：

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

# 一、Vue组件介绍 #

## 1、组件概述 ##

组件系统是Vue其中一个重要的概念，它提供了一种抽象，让可以使用独立可复用的`小组件`来构建大型应用，任意类型的应用界面都可以抽象为一个`组件树`，如图所示。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]  
组件是可复用的`Vue实例`，且带有一个名字。组件可以`扩展HTML元素`，封装可重用的HTML代码，可以将组件看作自定义的HTML元素。例如，页面中可能会有`页头`、`侧边栏`和`内容区`等组件，每个组件又包含了其他的像`导航链接`、`博文`之类的组件。

## 2、组件使用步骤 ##

Vue的组件的使用有`3个步骤：`

`创建组件：`通过调用`Vue.extend()`方法创建组件。

`注册组件：`调用`Vue.component()`方法组件组件。

`使用组件：`使用Vue实例的页面内自定义组件标签。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]  
`示例：`按Vue组件使用步骤创建了显示欢迎词的组件，然后在页面中使用该组件

<div id="app" style="margin:20px auto;width:600px">
      
      <my-comp></my-comp> 
    </div>

// JavaScript代码:
    // 创建组件
    var myComp=Vue.extend({    //调用Vue.extend()创建一个组件
      template:"<h1>使用Vue组件！</h1>"  //template属性用于定义组件要渲染的HTML
    });
    // 注册组件
    Vue.component("my-comp",myComp);   //使用Vue.component()注册组件
    // 实例化Vue
    var vm = new Vue({ 
      el: "#app"
    })

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

## 3、实践练习 ##

# 一、Vue组件使用 #

## 1、组件注册 ##

> 注册组件过程又细分为全局注册和局部注册。

`(1) 全局注册`

在调用`Vue.component()`注册组件时，组件的注册是全局的，这意味着该组件可以在当前页面的任意Vue实例下使用。

Vue.component('my-component-name', {  /* ... */ })

`示例：`创建了一个Vue组件分别在两个Vue实例中使用

<div id="app1">
      <h1>Vue实例1</h1>
     <my-comp></my-comp>
    </div>
    <div id="app2">
      <h1>Vue实例2</h1>
      <my-comp></my-comp>
    </div>

// JavaScript代码:
    // 创建组件
    var myComp = Vue.extend({ 
      template: "<h3>使用全局Vue组件！</h3>"
    });
    // 注册组件
    Vue.component("my-comp", myComp);
    // 实例化Vue实例1
    var vm1 = new Vue({ 
      el: "#app1"
    });
    // 实例化Vue实例2
    var vm2 = new Vue({ 
      el: "#app2"
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]  
`(2) 局部注册`

如果不需要全局注册，或者是让组件使用在其他组件内使用，可以用Vue实例化时，设置选项参数的`components`参数属性`实现局部注册`。如下下面代码所示：

// 创建组件
    var myComp=Vue.extend({ 
      template:"<h1>使用全局Vue组件！</h1>"
    });

// 实例化Vue
    var vm = new Vue({ 
      el: "#app",
      components:{ 
        "my-comp":myComp // 局部注册组件
      }
    });

`示例：`修改上一个示例，在Vue实例1中注册组件，而Vue实例2没有注册组件

<div id="app1">
      <h1>Vue实例1</h1>
      <my-comp></my-comp>
    </div>
    <div id="app2">
      <h1>Vue实例2</h1>
      
      <my-comp></my-comp>
    </div>

// JavaScript代码:
    // 创建组件
    var myComp=Vue.extend({ 
      template:"<h4>使用局部Vue组件！</h4>"
    });
    // 实例化Vue实例1
    var vm1 = new Vue({ 
      el: "#app1",
      components:{ 
        "my-comp":myComp // 局部注册组件
      }
    });
    // 实例化Vue实例2
    var vm2 = new Vue({ 
      el: "#app2"
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]

## 2、组件注册语法糖 ##

上述组件注册的方式有些繁琐，Vue.js为了简化这个过程，提供了注册语法糖，即在注册组件时，直接创建和注册组件，Vue在背后会自动地调用`Vue.extend()`。

`(1) 简化全局注册`

使用`Vue.component()`直接创建和注册组件的代码如下所示：

// 全局注册，my-comp是组件标签名称
    Vue.component('my-comp',{ 
      template: '<div><h1>使用Vue组件！</h1></div>'
    })

`(2) 简化局部注册`

在选项对象的`components`属性中实现局部注册的代码如下所示：

var vm = new Vue({ 
      el: '#app',
      components: { 
        // 局部注册，my-comp是组件标签名称
        'my-comp': { 
          template: '<div><h1>使用Vue组件！</h1></div>'
        }
      }
    })

## 3、使用script或template标签 ##

尽管语法糖简化了组件注册，但在template选项中拼接HTML元素比较麻烦，这也导致了HTML和JavaScript的高耦合性。Vue提供了两种方式将定义在JavaScript中的HTML模板分离出来。

使用< script>标签

// < script>标签方式
    <script type="text/x-template" id="myComp">
     
    </script>

使用< template>标签

// <template>标签方式
    <template id="模板id">
      
    </template>

`示例：①`

<div id="app">
      <my-comp></my-comp>
    </div>

// <script>模板代码:
    <script type="text/x-template" id="myComp">
      <div><h1>使用Vue组件！</h1></div>
    </script>

// JavaScript代码:
    Vue.component('my-compt',{ 
      template: '#myComp' //根据id查找对应的元素
    });	
    var vm=new Vue({ 
      el: '#app',
      components:{ 
        'my-comp' : { 
          template: '#myComp'
        }
      }
    });

> 使用`< script>`标签时，type指定为`text/x-template`，意在告诉浏览器这不是一段js脚本，这样浏览器在解析HTML文档时会忽略`< script>`标签内定义的内容。

`示例：①`

<div id="app">
      <my-comp></my-comp>
    </div>

// <template>模板代码:
    <template id="myComp"> //不需要指定type属性
      <div><h1>使用Vue组件！</h1></div>
    </template>

// JavaScript代码:
    var vm=new Vue({ 
      el: '#app',
      components:{ 
        'my-comp':{ 
          template: '#myComp' //根据id查找对应的元素
        }
      }
    });

>  *  最好使用< script>或< template>标签来定义组件的HTML模板
>  *  在Vue.js中，可创建.vue后缀的文件，在.vue文件中定义组件。

## 4、组件的el和data选项 ##

*  一般实例化Vue的多数选项也可以用在`Vue.extend()`或`Vue.component()`中的，不过有两个特殊选项参数除外即`data`和`el`。Vue.js规定：在定义组件的选项时，`data`和`el`选项`必须使用函数`。
 *  如果data选项指向`某个对象`，这意味着所有的`组件实例`共用一个`data`。使用一个函数作为`data选项`，让这个函数返回一个`新对象`，语法如下所示：

`语法：`

// 全局注册组件
    Vue.component("组件名称", { 
      el:function(){  ... },
      data: function(){ 
        return { 
          属性 : 值
        }
      },
      template:"组件模板"	
    })

// 局部注册组件
    var vm1 = new Vue({ 
      el: "#app",
      components:{ 
        "组件名称":{ 
        el:function(){  ... },
        data: function(){ 
          return { 
            属性 : 值
          }
        },
        template:"组件模板"
        }
      }
    });

`示例：`

<div id="app">
      <h3>新奇水果</h3>
      <fruit-list-comp></fruit-list-comp>
    </div>

// <template>模板代码:
    <template>
      <div>
        <ul>
          <li v-for="fruit in fruitList">{ {  fruit }}</li>
        </ul>
      </div>
    </template>

// JavaScript代码:
    var vm1 = new Vue({ 
      el: "#app",
      components: { 
        "fruit-list-comp": { 
          data: function () { 
            return { 
              fruitList: ["龙珠果", "刺角瓜", "莲雾", "佛手柑", "费约果"]
            }
          },
          template:"#fruitTemplate"
        }
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]

## 5、实践练习 ##

# 三、组件之间的通信 #

## 1、父组件和子组件 ##

`示例：`可以在组件中定义并使用其他组件，这就构成了`父子组件`的关系

// HTML代码:
    <div id="app">
      <parent-component></parent-component>
    </div>

// JavaScript代码:
    // 创建子组件
    var child= Vue.extend({ 
      template:"<p>This is a child component!</p>"
    });

// JavaScript代码:
    // 创建父组件
    var parent= Vue.extend({ 
      // 在父组件内使用<child-component>标签
      template:"<p>This is a parent component!<child-component></child-component></p>",
      components:{ 
        "child-component":child // 注册子组件
      }
    });

// JavaScript代码:
    // 注册父组件
    Vue.component( "parent-component",parent )
    var vm = new Vue({ 
      el: "#app"
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]  
下面分`6个步骤`来理解代码：

1.  var child = Vue.extend(…)定义一个子组件。
2.  var parent = Vue.extend(…)定义一个父组件。
3.  components: \{ ‘child-component’: child \}，将子组件注册到父组件，并将子组件的标签设置为child-component。
4.  template :’< p>This is a parent component < child-component>< /child-component>< /p>’，在父组件内以标签的形式使用子组件。
5.  Vue.component(‘parent-component’, parent)全局注册父组件。
6.  在页面中使用< parent-component>标签渲染父组件的内容，同时子组件的内容也被渲染出来。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]

子组件是在父组件中注册的，它只能在父组件中使用，确切地说：`子组件只能在父组件的template中使用。`

请注意下面两种子组件的使用方式是`错误的`：

*  以子标签的形式在父组件中使用
 *  在父组件标签外使用子组件

## 2、通过props向子组件传递数据 ##

*  组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。
 *  可以使用props把数据传给子组件。
 *  一个组件默认可以拥有任意数量的prop（属性），任何值都可以传递给任何prop。
 *  在组件中，使用选项props来声明需要从父组件接收的数据，props的值可以是两种，一种是字符串数组，一种对象。

`语法：`props的值是字符串数组

var component=Vue.extend({ 
      props: ["属性名",… "属性名"],
      template: "模板"
    });

> HTML中的属性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。在`DOM`或`模板`中使用属性名时，`camelCase（驼峰命名法）`的属性名需要使用其等价的`kebab-case（短横线分隔命名）`命名，如下面代码所示：

Vue.component("blog-post", { 
      // 在JavaScript中是camelCase命名
      props: ["postTitle"],
      template: '<h3>{ { postTitle }}</h3>'
    })
    
    <blog-post post-title="hello!"></blog-post>

`语法：`props的值是对象

var component=Vue.extend({ 
      props: { 
        属性名: String,
        属性名: Number,
        属性名: Boolean,
        …
      },
      template: "模板"
    });

> 属性类型包含`String（字符串）`、`Number（数字`）、`Boolean（布尔）`、`Array（数组）`、`Object（对象）`、`Date（日期）`、`Function（函数）`和`Symbol（符号）`。

> 对组件属性传值是单向的，并且可以静态和动态绑定属性。

`示例：`可以在组件中定义并使用其他组件，这就构成了父子组件的关系

HTML代码:
    <div id="app">
    <banner-component v-bind:is-style="isShowStyle" message="消暑玩一夏！"></banner-component>
    </div>

> `v-bind:is-style="isShowStyle"`动态绑定属性，`message="消暑玩一夏！"`静态绑定属性

<template id="childComp">      
      <span>{
       { subMessage }}</span>     
    </template>
    
    <template id="parentComp">
    <div>
    <h1 :class="{ banner: isStyle }">
    {
       { message }} 
    <child-component sub-message="不玩就out啦!"></child-component>
    </h1>           
    </div>
    </template>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data : { 
        isShowStyle:true
      },
      components: { 
        "banner-component": { 
          props: ["message", "isStyle"],
          template: "#parentComp", // 注册父组件
          components:{ 
            "child-component":{ 
              props:{ 
                subMessage:String
              },
              template:"#childComp" // 注册子组件
            }
          }
        }
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]

## 3、实践练习 ##

# 四、Vue的插槽 #

## 1、插槽使用 ##

> 插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于将所携带的内容插入到指定的某个位置，从而使`模板分块`，具有模块化的特质和更大的`重用性`。插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

> 插槽一般在Vue的父子组件中使用，在子组件使用`< slot>标签`将不同的DOM树组合在一起。< slot>标签是组件内部的占位符，用户可以使用自己的标记来填充。通过定义一个或多个< slot>标签，可将外部标记引入到组件的虚拟DOM中进行渲染，相当于“在此处渲染用户的标记”。

> 插槽有两种使用方式：`默认插槽`和`具名插槽`。

> 插槽（Slot）是为网络组件创建“声明性API”的一种方法。它们混入到用户的DOM中，帮助对整个组件进行渲染，从而将不同的DOM树组合在一起。

`示例：` **默认插槽**

HTML代码:
    <div id="app">
      <div>
        <p-comp> 需要分发的内容 </p-comp>
      </div>
    </div>

// <template>模板代码:
    <template id="pComp">
      <div>
        <h1>使用默认插槽</h1>           
        <slot></slot>
      </div>
    </template>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      components: { 
        "p-comp": { 
          template: "#pComp"
        }
      }
    });

![在这里插入图片描述][20210629203559203.png]  
`示例：` **具名插槽**

默认插槽只能有一个，当需要使用多个插槽时，要使用具名的插槽，即对插槽命名。

HTML代码:
    <div id="app">
      <div>
        <p-comp>           
        	
          <template slot="header">
            <h1>商品管理系统</h1>
          </template>
          商品管理内容
          <template slot="footer">
            <h3>版权声明</h3>
          </template>
        </p-comp>
      </div>
    </div>

// <template>模板代码:
    <template id="pComp">
      <div>           
        <slot name="header"></slot>  //具名插槽
        <slot></slot>  //默认插槽
        <slot name="footer"></slot>  //具名插槽
      </div>
    </template>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      components: { 
        "p-comp": { 
            template: "#pComp"
        }
      }
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]

## 2、作用域插槽使用 ##

插槽可以控制html模板的显示与不显示。`作用域插槽（slot-scope）`其实就是`带数据的插槽`。原来`父组件`可以通过绑定数据传递给`子组件`。而作用域插槽可以通过`子组件`绑定数据传递给`父组件`。作用域插槽的使用场景：既可以复用子组件的slot，又可以使slot内容不一致。

`示例：`

<div id="app">
      <div>
      <book-list :books="bookList">
        <template slot="book" slot-scope="props">
          <li>{
       { props.bookname }}</li>                 
        </template>
      </book-list>
      </div>
    </div>

// <template>模板代码:
    <template id="bookComp">
      <div>    
        <ul>      
          <slot name="book" v-for="book in books" :bookname="book.name"></slot>           
        </ul> 
      </div>
    </template>

// JavaScript代码:
    var vm = new Vue({ 
      el: "#app",
      data:{ 
        bookList:[
          {  name:"《Vue.js实战》" },
          {  name:"《ASP.NET实战》" },
          {  name:"《深入浅出Webpack》" }
        ]
      },
      components: { 
        "book-list": { 
          rops:["books"],
          emplate: "#bookComp"
        }
      }
    });

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

## 3、实践练习 ##

# 总结： #

> **Vue的组件的使用有3个步骤：**
> 
>  *  `创建组件：`通过调用`Vue.extend()`方法创建组件。
>  *  `注册组件：`调用 `Vue.component()` 方法组件组件。
>  *  `使用组件：`使用Vue实例的页面内自定义组件标签。

> **组件名的方式有两种：**
> 
>  *  `kebab-case（短横线分隔命名）`，如< my-component-name>。
>  *  `PascalCase（首字母大写命名）`，如< MyComponentName>。

> 直接在DOM（即非字符串的模板）中使用时只有kebab-case是有效的，所以一般推荐使用kebab-case方式命名组件名。

> 组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用props把数据传给子组件。

> 插槽在Vue的父子组件中使用，在子组件使用标签将不同的DOM树组合在一起。

[Link 1]: https://ymjin.blog.csdn.net/article/details/118276452
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70]: /images/20221005/568ae1e4d3384d9c912610157f2f823a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 1]: /images/20221005/421733578d0f4650b9554ab7f8002ea6.png
[2021062919585385.png]: /images/20221005/0818dc1fd61045a480ec0d0b7af59bb2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 2]: /images/20221005/5a9c4c10b88f40faa14c36a5235035f8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 3]: /images/20221005/d9aae89564054fbaa9d0ffd2bcbcee71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 4]: /images/20221005/5e74c38d474f43aca05b15faffe7c3ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 5]: /images/20221005/0c3d2d3489e249dab6323f680489948a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 6]: /images/20221005/cf0ec20632204c9a8fc863195b2a5d08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 7]: /images/20221005/0b6a546faac541b386ed19637b3e328f.png
[20210629203559203.png]: /images/20221005/4c38531258b64d6fae07c912ea842aeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDg5MzkwMg_size_16_color_FFFFFF_t_70 8]: /images/20221005/4642283879a24fd0b2fb03996f1992a1.png
[20210629204049483.png]: /images/20221005/6aefc7d32ae743668f8bb30a2ebcbef0.png