Vue如何更好的封装组件？几个小技巧助你成为组件封装达人，让我们封装的组件更加优雅易用

Posted 2021-12-28 CharmDeer

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue如何更好的封装组件？几个小技巧助你成为组件封装达人，让我们封装的组件更加优雅易用相关的知识，希望对你有一定的参考价值。

一、$attrs

我们在使用组件的过程中，有时需要给被封装的子组件传递Prop
例如：

<template>
    <el-input v-model="innerVal" placeholder="placeholder"
    @input="$emit('input',$event)"
    >
    </el-input>
</template>

<script>
  export default 
    name: "MyInput",
    data()
      return
        innerVal:this.value
      
    ,
    watch:
      value()
        if(this.value!==this.innerVal)
          this.innerVal=this.value
        
      
    
  
</script>

<style scoped>

</style>

我们二次封装了my-input组件
需求：通过my-input组件将el-input原有的clearable属性传递给它
原始做法：
我们可以在my-input组件中声明clearable属性，通过my-input组件接收clearable

再将它传递给el-input组件：

父组件未传递clearable值：

父组件传递clearable值：

但是如果每一个Prop都需要父组件声明，再一个一个传递给子组件，那就太麻烦了

此时我们可以利用组件实例上的$attrs属性来简化这个过程

这个属性包含了组件被传入，但没有被声明的Prop
我们可以打印这个属性来看一下：
第一步：清除之前的声明
第二步：在create钩子中打印$attrs属性

查看打印结果：

这里面就包含的有我们传入的clearable属性
接下来我们可以通过v-bind指令，以传入对象的方式将 $attrs中的属性，绑定到子组件上，这样父组件就无需声明，就可以轻松地将这些prop传递给子组件

这样父组件就无需声明，就可以轻松地将这些prop传递给子组件

但需要注意的一点是，Vue会将组件被传入，但未声明的prop作为html属性绑定到组件的根元素上：

因此我们需要用下面的属性来处理这种情况

将其值设置为false来避免这种行为

解决：

$attrs其实相当于传输数据的一个桥梁

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Title</title>
</head>
<body>

<div id="app">
    <the-parent :rootData="rootData"></the-parent>

</div>
<template id="theParent">
    <the-children v-bind="$attrs"></the-children>
</template>
<template id="theChildren">
    <div>子组件展示:rootdata</div>
</template>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue(
    el: '#app',
    data: 
      rootData: "根组件的数据"
    ,
    components: 
      theParent: 
        template: "#theParent",
        // inheritAttrs:false,
        created() 
          console.log(this.$attrs)
        ,
        components: 
          theChildren: 
            template: "#theChildren",
            props: ['rootdata'],
          
        
      
    
  );
</script>
</body>
</html>