浅谈vue封装组件---js版

r囧r小猫 2022-10-29 05:26 153阅读 0赞

## 什么是组件化： ##

组件化就是将一个页面拆分成一个个小的功能模块，每个功能模块完成属于自己这部分独立的功能，使得整个页面的管理和维护变得非常容易。

## Vue组件化思想 ##

*  组件化是Vue中的重要思想，当我们对vue的基本知识有了一定的基础就要开始封装组件了

它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。组件树。

*  组件化思想的应用  
    1.在项目中充分利用组件化的思想  
    2.尽可能的将也页面拆分成一个个小的可复用的组件  
    3.好处：代码更加方便组织和管理，扩展性也更强

## 一.注册组件的基本步骤 ##

下面我们用一个封装一个Element Ui 的输入框组件为例，贯彻全文

组件的使用分成三个步骤

**1.创建组件构造器c-input**

组件的模板 template  
**注意：只能有一个根元素，否则警告报错**  
1 template 可以是字面量字符串，缺点是没有高亮，内置在 JavaScript 中，写起来麻烦  
2 template 可以写在 script 标签中，虽然解决了高亮的问题，但是也麻烦  
3 以上方式都不好，我们最终的解决方案是使用 Vue 的 .vue 单文件组件来写。（webpack）  
但是要想使用这种方式必须结合一些构建工具

**2.注册组件**

**注册组件 分为 局部注册 与 全局注册，下一章再讲**

......使用代码.........
    import cInput from "组件地址/c-ipunt.vue";
    export default {
      components: {cInput},
    
    .......

**3.父组件使用**

<template>
      <c-ipunt/>
    </template>
    
    <script>
    import cInput from "组件地址/c-ipunt.vue";
    export default {
    
      components: {cInput},
    
    .......
    
    </script>

## 二.丰富组件 ##

1.  组件是独立的作用域，就像我们 Node 中的 JavaScript 模块一样，独立的
2.  组件其实就是一个特殊的 Vue 实例，可以有自己的 data、methods、computed、watch 等等选项
3.  组件的 data 必须是函数  
    函数中返回一个对象作为组件的 data

<template>
    
          <el-input >
           
          </el-input>
    
    </template>
    <script>
    
    export default {
      name: 'c-input',
      model: {
        prop: 'value',
        event: 'input',
      },
      props: {
    
      },
      data() {
        return {
    
        }
      },
      watch: {
    
      },
      methods: {
     
      },
      mounted() {
     
      },
    }
    </script>
    <style scoped>
    
    </style>

# 三.父子组件间的通讯 #

## 1.父---->子通信 \[props Down\] ##

父组件通过 props 向下传递数据给子组件

### 所以子组件要定义接收的参数 ###

我们可以看到Element Ui 的输入框组件，有这些属性我们可以重新定义封装

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZW5ncnVpNDA_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZW5ncnVpNDA_size_16_color_FFFFFF_t_70 1][]

<template>
    
          <el-input :disabled="disabled" ref="input" :placeholder="placeholder" 
            :type="type" :auto-complete="autocomplete">
       
          </el-input>
    </template>
    <script>
    
    export default {
      name: 'c-input',
      model: {
        prop: 'value',
        event: 'input',
      },
      props: {
        labelwidth: {
          type: String,
          default: undefined,
        },
        autosize: {
          default() {
            return { minRows: 2, maxRows: 4 }//如果不使用这个属性的默认值
          },
        },
        inputCss: {
          type: String,
          default: '',
        },
        label: {
          type: String,
          default: '',
        },
        value: {
          default: undefined,
        },
        prop: {
          type: String,
          default: null,
        },
        placeholder: {
          type: String,
          default: undefined,
        },
        required: {
          type: Boolean,
          default: false,
        },
        width: {
          type: String,
        },
        type: {
          type: String,
          default: undefined,
        },
        autocomplete: {
          type: String,
          default: 'on',
        },
        disabled: {
          type: Boolean,
          default: false,
        },
        span: {
          type: Number,
        },
      },
      data() {
        return {
    
        }
      },
      watch: {
    
      },
      methods: {
     
      },
      mounted() {
     
      },
    }
    </script>
    <style scoped>
    
    </style>

**父组件使用**

<template>
        <c-input label="用户名" :span="12" />
    </template>
    
    <script>
    import cInput from "组件地址/c-ipunt.vue";
    export default {
    
      components: {cInput},
    
    .......
    
    </script>

## 2. 子----> 父传值 \[Events Up\] ##

**子组件通过 events 给父组件发送消息，实际上就是子组件把自己的数据发送到父组件。**

**在 element ui 的 el-input中是有 @input.native="updateValue($event.target.value)" 获取现在输入值    @keyup.enter.native="handleEnter"  回车  @focus="focus" 得到焦点 等事件的**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZW5ncnVpNDA_size_16_color_FFFFFF_t_70 2][]

<template>
    
          <el-input :disabled="disabled" ref="input" :placeholder="placeholder" 
            :type="type" :auto-complete="autocomplete"    @input.native="updateValue($event.target.value)" @keyup.enter.native="handleEnter"  @focus="focus">
       
          </el-input>
    </template>
    <script>
    
    export default {
      name: 'c-input',
      model: {
        prop: 'value',
        event: 'input',
      },
      props: {
        labelwidth: {
          type: String,
          default: undefined,
        },
        autosize: {
          default() {
            return { minRows: 2, maxRows: 4 }//如果不使用这个属性的默认值
          },
        },
        inputCss: {
          type: String,
          default: '',
        },
        label: {
          type: String,
          default: '',
        },
        value: {
          default: undefined,
        },
        prop: {
          type: String,
          default: null,
        },
        placeholder: {
          type: String,
          default: undefined,
        },
        required: {
          type: Boolean,
          default: false,
        },
        width: {
          type: String,
        },
        type: {
          type: String,
          default: undefined,
        },
        autocomplete: {
          type: String,
          default: 'on',
        },
        disabled: {
          type: Boolean,
          default: false,
        },
        span: {
          type: Number,
        },
      },
      data() {
        return {
    
        }
      },
      watch: {
    
      },
      methods: {
         updateValue(val) {
          this.$emit('input', val)
        },
        handleEnter() {
          this.$emit('keyup-enter')
        },
        focus() {
          this.$emit('focus')
        },
      },
      mounted() {
     
      },
    }
    </script>
    <style scoped>
    
    </style>

**父组件使用**

<template>
        <c-input label="用户名" :span="12" @keyup-enter="mykeyupEnter" @focus="myfocus"/>
    </template>
    
    <script>
    import cInput from "组件地址/c-ipunt.vue";
    export default {
    
      components: {cInput},
    
    .......
      methods: {
    mykeyupEnter(){
    console.log("我是父组件的输入框回车")},
    
    myfocus(){
    console.log("我是父组件的输入框得到焦点")
    }
    },
    ......
    
    </script>

## 3. 子<----> 父 双向传值 ##

我们知道Vue的核心特性之一是双向绑定，

**v-model**是一个指令用来实现双向绑定，限制在<input>、<select>、<textarea>、components中使用，修饰符.**lazy**(取代 input 监听 change 事件)、.**number**(输入字符串转为有效的数字)、.**trim**(输入首尾空格过滤)。那么我们封装的组件怎么进行双向绑定呢。

首先 props添加一个value，接收父组件的数据变化。 再添加一个 value的监听，监听父组件的数据变化。 而子组件数据变化的时候会出发这个事件 @input.native=""，所以这个时间触发this.$emit('input', val)，向父组件传递 子组件的数据变化

<template>
    
          <el-input :disabled="disabled" ref="input" :placeholder="placeholder" 
            :type="type" :auto-complete="autocomplete"    @input.native="updateValue($event.target.value)" @keyup.enter.native="handleEnter"  @focus="focus"  v-model="modelValue">
       
          </el-input>
    </template>
    <script>
    
    export default {
      name: 'c-input',
      model: {
        prop: 'value',
        event: 'input',
      },
      props: {
        labelwidth: {
          type: String,
          default: undefined,
        },
        autosize: {
          default() {
            return { minRows: 2, maxRows: 4 }//如果不使用这个属性的默认值
          },
        },
        inputCss: {
          type: String,
          default: '',
        },
        label: {
          type: String,
          default: '',
        },
        value: {
          default: undefined,
        },
        prop: {
          type: String,
          default: null,
        },
        placeholder: {
          type: String,
          default: undefined,
        },
        required: {
          type: Boolean,
          default: false,
        },
        width: {
          type: String,
        },
        type: {
          type: String,
          default: undefined,
        },
        autocomplete: {
          type: String,
          default: 'on',
        },
        disabled: {
          type: Boolean,
          default: false,
        },
        span: {
          type: Number,
        },
      },
      data() {
        return {
          modelValue: undefined,
        }
      },
      watch: {
        value: {
          handler(newValue) {
            this.modelValue = newValue
          },
          immediate: true,
        },
      },
      methods: {
         updateValue(val) {
          this.$emit('input', val)
        },
        handleEnter() {
          this.$emit('keyup-enter')
        },
        focus() {
          this.$emit('focus')
        },
      },
      mounted() {
     
      },
    }
    </script>
    <style scoped>
    
    </style>

** 使用**

<template>
        <c-input label="用户名" :span="12" @keyup-enter="mykeyupEnter" @focus="myfocus" v-model="myName"/>
    </template>
    
    <script>
    import cInput from "组件地址/c-ipunt.vue";
    export default {
    
      components: {cInput},
      data() {
        return {
    myName: undefined,
    }},
    .......
      methods: {
    mykeyupEnter(){
    console.log("我是父组件的输入框回车")},
    
    myfocus(){
    console.log("我是父组件的输入框得到焦点")
    }
    },
    ......
    
    </script>

# 四.slot插槽 #

## 什么是插槽？ ##

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

## 怎么用插槽？ ##

### 默认插槽 ###

父组件

<template>
      <div>
        我是父组件
        <slotOne1>
          <p style="color:red">我是父组件插槽内容</p>
        </slotOne1>
      </div>
    </template>

> 在父组件引用的子组件中写入想要显示的内容（可以使用标签，也可以不用）

子组件(slotOne1)

<template>
      <div class="slotOne1">
        <div>我是slotOne1组件</div>
        <slot></slot>
      </div>
    </template>

在子组件中写入slot，slot所在的位置就是父组件要显示的内容

![ff307ad6eaddcc978781ea705bbef47c.png][]

### 具名插槽 ###

子组件

<template>
      <div class="slottwo">
        <div>slottwo</div>
        <slot name="header"></slot>
        <slot></slot>
        <slot name="footer"></slot>
      </div>
    </template>

> 在子组件中定义了三个slot标签，其中有两个分别添加了name属性header和footer

父组件

<template>
      <div>
        我是父组件
        <slot-two>
          <p>啦啦啦，啦啦啦，我是卖报的小行家</p>
          <template slot="header">
              <p>我是name为header的slot</p>
          </template>
          <p slot="footer">我是name为footer的slot</p>
        </slot-two>
      </div>
    </template>

在父组件中使用template并写入对应的slot值来指定该内容在子组件中现实的位置（当然也不用必须写到template），没有对应值的其他内容会被放到子组件中没有添加name属性的slot中

![138b6928087c7fcac14bb8b82b625fa6.png][]

### 作用域插槽 ###

子组件

<template>
      <div>
        我是作用域插槽的子组件
        <slot :data="user"></slot>
      </div>
    </template>
    
    <script>
    export default {
      name: 'slotthree',
      data () {
        return {
          user: [
            {name: 'Jack', sex: 'boy'},
            {name: 'Jone', sex: 'girl'},
            {name: 'Tom', sex: 'boy'}
          ]
        }
      }
    }
    </script>

> 在子组件的slot标签上绑定需要的值

父组件

<template>
      <div>
        我是作用域插槽
        <slot-three>
          <template slot-scope="user">
            <div v-for="(item, index) in user.data" :key="index">
            {
       {item}}
            </div>
          </template>
        </slot-three>
      </div>
    </template>

在父组件上使用slot-scope属性，user.data就是子组件传过来的值

![d441a692b6e25c555438ecb09d157ff5.png][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZW5ncnVpNDA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210208222822411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZW5ncnVpNDA=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZW5ncnVpNDA_size_16_color_FFFFFF_t_70 1]: /images/20221024/0de76d46267c48628d80b5a0b343503a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZW5ncnVpNDA_size_16_color_FFFFFF_t_70 2]: /images/20221024/b055c78c758f4c2b82300756c306a083.png
[ff307ad6eaddcc978781ea705bbef47c.png]: /images/20221024/2e876aa186ef4d4cb1f9b3d171b66c14.png
[138b6928087c7fcac14bb8b82b625fa6.png]: /images/20221024/c5e0959bbd0b40afb6a97cbae3d028db.png
[d441a692b6e25c555438ecb09d157ff5.png]: /images/20221024/ccfb0ab8da7f4d62b6ffe484d775360f.png