2021-06-29 Vue 第三方组件的二次封装

封装第三方组件

1. 需要自定义组件MyInput, 透传el-input的所有事件和方法

   <template>
     <div class="input-container">
       <my-input
         v-model="inputVal"
         style="width: 50%; margin-left: 200px;"
         size="mini"
         clearable
         maxlength="5"
         ref="myInput"
       >
         <template slot="prepend">Http://</template>
         <template slot="append">.com</template>
         <i slot="suffix" class="el-input__icon el-icon-date"></i>
         <i slot="prefix" class="el-input__icon el-icon-search"></i>
       </my-input>
     </div>
   </template>
   
   <script lang="ts">
   import { Component, Vue, Ref } from "vue-property-decorator";
   import MyInput from "./MyInput.vue";
   
   @Component({
     components: {
       MyInput,
     },
   })
   export default class NavFooterComponent extends Vue {
     private inputVal = "123";
   
     @Ref('myInput')
     myInput!: any;
   
     private mounted() {
       this.myInput?.elInput.focus();
     }
   }
   </script>
   

2. 使用第三方组件的属性: $sttrs

   $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>
   
   <script lang="ts">
   import { Component, Vue, Model, Emit, Ref } from "vue-property-decorator";
   import { Input } from "element-ui";
   
   @Component({
     name: "MyInput",
     components: {
       ElInput: Input,
     },
     inheritAttrs: false,
   })
   export default class extends Vue {
    @Model("input")
     value!: any;
     
     set input(newVal: any) {
       this.$emit("input", newVal);
     }
   
     get input() {
       return this.value;
     }
   }
   

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

   默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 为 false，这些默认行为将会被去掉。而通过 $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。注意：这个选项不影响 class 和 style 绑定。

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

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

3. 使用第三方法组件的自定义事件: $listeners

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

   <el-input v-model="input" v-bind="$attrs" v-on="$listeners"></el-input>
   

4. 使用第三方付组件的插槽

   <el-input v-model="input" v-bind="$attrs" v-on="$listeners" ref="elInput">
     <!-- 普通插槽 -->
     <slot v-for="(_, name) in $slots" :name="name" :slot="name" />
   
     <!--
       作用域插槽
       <template v-for="(_, name) in $scopedSlots" #[name]="scope">
        <slot :name="name" v-bind="scope" />
       </template>
     -->
   </el-input>
   

5. 使用第三方组件的Ref

   如上代码, 在el-inpuit上挂载属性 ref="elInput"

   @Component({
     name: "MyInput",
     components: {
       ElInput: Input,
     },
     inheritAttrs: false,
   })
   export default class extends Vue {
     
     @Ref("elInput")
    elInput!: any;
    
    // ...
   }
   

   <template>
     <div class="input-container">
       <my-input
         v-model="inputVal"
         ref="myInput"
       >
       </my-input>
     </div>
   </template>
   
   <script lang="ts">
   import { Component, Vue, Ref } from "vue-property-decorator";
   import MyInput from "./MyInput.vue";
   
   @Component({
     components: {
       MyInput,
     },
   })
   export default class NavFooterComponent extends Vue {
     private inputVal = "123";
   
     @Ref('myInput')
     myInput!: any;
   
     private mounted() {
       // <!-- 父组件中获取elInput实例HTMLLInputElement -->
       this.myInput?.elInput.focus();
     }
   }
   </script>