前端框架之封装Vue第三方组件三个技巧

更新时间：2022年07月11日 16:03:14 作者：红尘炼心

这篇文章主要为大家介绍了前端框架封装Vue第三方组件的三个技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

引言

在封装第三方组件中，经常会遇到一个问题，如何通过封装的组件去使用第三方组件的Attributes(属性)、Events(自定义事件)、Methods(方法)、Slots(插槽)。

当然这个问题并不是难以解决，用普通方法解决难免陷入繁琐重复的工作中，而且封装的组件代码可读性也不高。

本专栏将介绍三种技巧来使用第三方组件的Attributes(属性)、Events(自定义事件)、Slots(插槽)，至于使用第三方组件的Methods(方法)的技巧还待优化。

一、使用第三方组件的属性

封装一个elementUI的el-input输入框组件称为myInput，若要在myInput组件上添加一个disabled属性来禁用输入框，要如何实现呢？一般同学会这么做

//myInput.vue
<template>
  <div>
    <el-input v-model="inputVal" :disabled="disabled"></el-input>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: '',
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
}
</script>

过一段时间后又要在myInput组件上添加el-input组件的其它属性，el-input组件总共有27个多属性，那该怎么呢，难道一个个用prop传进去，这样不仅繁琐而且可读性差，可以用$attrs一步到位，先来看一下attrs的官方定义。

$attrs: 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs"></el-input>
  </div>
</template>

这还不够，还得把inheritAttrs选项设置为false，为什么呢，来看一下inheritAttrs选项的官方定义就明白了。

默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。

通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。而通过 $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。注意：这个选项不影响 class 和 style 绑定。

简单来说，把inheritAttrs设置为false，避免给myInput组件设置的属性被添加到myInput组件的根元素div上。

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs"></el-input>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  }
}
</script>

这样设置后，在myInput组件上就可以直接使用el-input组件的属性，不管后续el-input组件再增加了多少个属性。

二、使用第三方组件的自定义事件

若在myIpput组件上使用el-input组件上自定义的事件呢，可能你的第一反应是this.$emit。

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs" @blur="blur"></el-input>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  computed: {
    inputVal: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  methods: {
    blur() {
      this.$emit('blur')
    }
  }
}
</script>

<myInput v-model="value" @blur="handleBlur"></myInput>

el-input组件有4个自定义事件，还不算多，假如遇到自定义事件更多的第三方组件，要怎么办，难道一个一个添加进去，这样会增加一堆非必要的methods，其实可以用$listeners一步到位，先来看一下$listeners的官方定义。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs" v-on="$listeners"></el-input>
  </div>
</template>

那么在myInput组件中给el-input组件添加上v-on="$listeners"，就可以在myInput组件上使用el-input组件自定义的事件。

三、使用第三方组件的插槽

若在myIpput组件上使用el-input组件上定义的插槽呢？这个没有多少取巧的方法，第三方组件定义多少个插槽，在封装的时候都得用slot标签暴露出去。比如暴露el-input组件中的prefix插槽，代码如下所示：

//myInput.vue
<template>
  <div>
    <el-input v-model="input" v-bind="$attrs" @blur="blur">
      <template #prepend>
        <slot name="prepend"></slot>
      </template>
    </el-input>
  </div>
</template>

四、使用第三方组件的方法

利用ref来实现，首先在myInput组件中的el-input组件上添加一个ref="elInput"属性，

//myInput.vue
<template>
  <div>
    <el-input ref="elInput></el-input>
  </div>
</template>
<script>
export default {
  mounted(){
     this.elInput = this.$refs.elInput;
  }
}
</script>

这里要注意父子组件的mounted的执行时机，因为一般el-input组件是全局引入的，相当同步引入组件，此时el-input组件的mounted会比myInput组件的mounted先执行，所以可以在myInput组件的mounted中把this.$refs.elInput赋值到myInput组件的this的一个属性上。

myInput组件如何使用el-input组件的方法分两种情况，跟myInput组件的引入有关系。

假如myInput组件是同步引入的

<template>
  <div>
    <myInput ref="myInput"></myInput>
  </div>
</template>
<script>
import myInput from './myInput.vue';
export default {
  data() {
    return {
    }
  },
  components: {
    myInput,
  },
  mounted() {
    //调用el-input组件的focus方法
    this.$refs.myInput.elInput.focus();
  }
}
</script>

假如myInput组件是异步引入的

<template>
  <div>
    <myInput ref="myInput"></myInput>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  components: {
    myInput: () => import('./myInput.vue')
  },
  mounted() {
    //调用el-input组件的focus方法
    setTimeout(() => {
       this.$refs.myInput.elInput.focus();
    })
  }
}
</script>

以上就是前端框架封装Vue第三方组件三个技巧的详细内容，更多关于封装Vue第三方组件的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解Vue demo实现商品列表的展示
这篇文章主要介绍了Vue demo实现商品列表的展示，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue2实现无感刷新token的方式详解
在Web应用中,用户需要通过认证和授权才能访问受保护的资源,为了实现认证和授权功能,通常需要使用Token来标识用户身份并验证其权限,本文给大家介绍了vue2实现无感刷新token的方式,需要的朋友可以参考下
2024-02-02
Vue中router-link常用属性使用案例讲解
这篇文章主要介绍了Vue中router-link常用属性使用案例讲解,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-01-01
vue.js中ref和$refs的使用及示例讲解
这篇文章主要给大家介绍了关于vue.js中ref和$refs使用的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用vue.js具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-08-08
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
这篇文章主要介绍了Vue全局使用less样式,组件使用全局样式文件中定义的变量操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
VUE v-for循环中每个item节点动态绑定不同函数的实例
今天小编就为大家分享一篇VUE v-for循环中每个item节点动态绑定不同函数的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
Vue3引入腾讯地图包含标注简易操作指南
这篇文章主要介绍了Vue3引入腾讯地图的相关资料,并实现点击地图添加标注的功能,示例代码提供了添加单个或多个标注的方法,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-09-09
vue函数input输入值请求时延迟1.5秒请求问题
这篇文章主要介绍了vue函数input输入值请求时延迟1.5秒请求问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue.directive 实现元素scroll逻辑复用
这篇文章主要介绍了Vue.directive 实现元素scroll逻辑复用功能，文中给大家提到元素实现滚动的条件有两个，具体内容详情大家参考下本文
2019-11-11
详细聊聊Vue的混入和继承
混入(mixin)是一种非常灵活的方式,用来分发Vue组件中可复用的功能,一个混入对象可以包含任意组件选项,下面这篇文章主要给大家介绍了关于Vue混入和继承的相关资料,需要的朋友可以参考下
2021-09-09