vue.js学习笔记--组件化开发

朱雀 2021-03-24 15:05 599阅读 0赞

### 文章目录 ###

*   *  一、什么是组件
     *  二、全局组件定义的三种方式
     *   *  1. 使用Vue.extend配合Vue.component方法
         *  2. 直接使用Vue.component方法
         *  3. 组件模板的分离写法
     *  三、局部组件
     *  四、父子组件通信
     *   *  1. 父组件-->子组件
         *  2. 子组件-->父组件
     *  五、 父子组件访问
     *   *  1.父访问子：
         *  2.子访问父：
     *  六、 插槽-slot
     *   *  1.基本使用：
         *  2.具名插槽：
         *  3.作用域插槽：

## 一、什么是组件 ##

组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可

组件化和模块化的不同：

*  模块化：是从代码逻辑的角度进行划分的
 *  组件化：是从UI界面的角度进行划分的

## 二、全局组件定义的三种方式 ##

### 1. 使用Vue.extend配合Vue.component方法 ###

<div id="app">
        
        <mycom></mycom>
      </div>
    
      <script> // 1.创建组件构造器 const com = Vue.extend({ template: '<h3>这是使用Vue.extend创建的组件</h3>' }) // 2.注册组件 Vue.component('mycom', com) // 也可以合并来写 // Vue.component('mycom', Vue.extend({ // template: '<h3>这是使用Vue.extend创建的组件</h3>' // })) var vm = new Vue({ el: '#app' }) </script>

**Vue.extend():**

*  调用该方法创建的是一个组件构造器
 *  通常在创建组件构造器时，传入template代表我们自定义组件的模板，该模板就是在使用到组件的地方要显示的HTML代码
 *  事实上，这种写法在vue2.x的文档中几乎已经看不到了

**Vue.component()：**

*  调用该方法将刚才的组件构造器注册为一个组件，并给它起一个组件的标签名称
 *  所以需要传递两个参数：1、注册组件的标签名 2、组件构造器
 *  注意：如果定义全局组件时，组件标签名使用了驼峰命名，则在引用组件时，需要把大写的驼峰改为小写的字母，同时，两个单词之间使用 - 连接

### 2. 直接使用Vue.component方法 ###

Vue.component('mycom',{ 
          template: '<h3>这是直接使用Vue.component创建的组件</h3>'
        })

这是一种比较方便的写法，实际内部还是会调用extend方法

### 3. 组件模板的分离写法 ###

<template id="com">
        <div>
          <h2>这是使用template标签定义的组件</h2>
        </div>
      </template>
    
      <script> var vm = new Vue({ el: '#app', components:{ 'mycom':{ template:'#com' } } }) </script>

## 三、局部组件 ##

全局组件可以在任意vue实例下使用，如果我们注册的组件是挂载在某个实例中，那么它就是一个局部组件

var vm = new Vue({ 
          el: '#app',
          components:{ 
            'mycom':com
          }
        })

## 四、父子组件通信 ##

子组件是不能引用父组件或者vue实例的数据的，但是在开发中一些数据确实需要从上层传递到下层。比如在一个页面中，我们从服务器请求到了大量数据，其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件（父组件）将数据传递给小组件（子组件）  
![在这里插入图片描述][20190812125618584.png]

### 1. 父组件–>子组件 ###

<div id="app">
        
        <mycom :cmovies="movies"></mycom>
      </div>
    
      <template id="com">
        <div>
          <ul>
            
            <li v-for="movie in cmovies">{
       {movie}}</li>
          </ul>
        </div>
      </template>
    
      <script> var vm = new Vue({ el: '#app', // 1.父组件中的数据(这里把根组件看成父组件) data: { movies: ['aaa', 'bbb', 'ccc'], }, components: { 'mycom': { template: '#com', // 2.使用pros声明从父组件接收到的数据 props: ['cmovies'] }, } }) </script>

**props的值有两种方式：**

*  字符串数组，数组中的字符串就是传递的名称
 *  对象，对象可以设置传递时的类型（type），也可以设置默认值（default）以及必传值（required），类型是对象或者数组时，默认值必须是一个函数

props: { 
           cmovies:{ 
             type:Array,
             default(){ 
               return []
             },
             required:true
           }
         }

### 2. 子组件–>父组件 ###

<div id="app">
        
        <mycom @itemclick="clickOp"></mycom>
      </div>
    
      <template id="com">
        <div>
          <button v-for="option in options" @click="btnClick(option)">{
       {option.name}}</button>
        </div>
      </template>
    
      <script> const mycom = { template: '#com', // 1.子组件中的数据 data() { return { options: [{ id: 1, name: 'aaa' }, { id: 2, name: 'bbb' }, { id: 3, name: 'ccc' }] } }, methods: { btnClick(option) { // 2.将自定义事件发射出去，第一个参数是自定义事件的名称，可以传递参数 this.$emit('itemclick', option) } } } var vm = new Vue({ el: '#app', components: { mycom }, // 4.父组件处理自定义事件，对传递过来的数据进行处理 methods: { clickOp(option) { console.log(option) } } }) </script>

## 五、 父子组件访问 ##

### 1.父访问子： ###

*  通过`this.$children`访问，这种方式获取到的是父组件下所有的子组件实例，一般在需要获取所有子组件实例的时候才使用这种方法，可以使用数组下标操作指定实例
 *  通过`this.$ref`访问指定子组件实例，需要在使用子组件时声明ref属性  
    例如子组件使用时为`<cpn ref='aaa'></cpn>`，父组件访问该组件时使用`this.$ref.aaa`获取该实例

### 2.子访问父： ###

通过`this.$parent`访问指定父组件实例

## 六、 插槽-slot ##

组件的插槽是为了让我们封装的组件更加具有扩展性，让使用者可以决定组件内部的一些内容到底显示什么

### 1.基本使用： ###

<div id="app">
        <mycom></mycom> 
        <mycom><button>我是拓展的内容111</button></mycom> 
        <mycom><b>我是拓展的内容222</b></mycom> 
      </div>
    
      <template id="com">
        <div>
          <h2>我是一个组件</h2>
          <slot></slot>
          
          
        </div>
      </template>

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

### 2.具名插槽： ###

当子组件的功能复杂时，子组件的插槽可能并非一个。当存在多个插槽，想要替换指定的某个插槽中的内容，使用具名插槽比较方便。

### 3.作用域插槽： ###

概括地说，作用域插槽是使用父组件替换插槽的标签，但是内容由子组件提供

<div id="app">
        
        <mycom>
         
         <div slot-scope="myslot">
           <span v-for="item in myslot.cdata">{
       {item}} - </span>
         </div>
        </mycom> 
      </div>
    
      <template id="com">
        <div>
          
          <slot :cdata="options">
            
            <ui>
              <li v-for="option in options">{
       {option}}</li>
            </ui>
          </slot>
        </div>
      </template>
    
      <script> var vm = new Vue({ el: '#app', components: { 'mycom': { template: '#com', data() { return { options:['aaa','bbb','ccc'] } }, }, } }) </script>

[20190812125618584.png]: /images/20210324/1616598324780.png
[20190813214100844.png]: /images/20210324/1616598306790.png