Vue 二次封装组件的方法

介绍

有的时候我们全局引用 UI 框架（类似于 ElementUI）的时候，有些简单的组件我们想进行二次封装，并确保能传递所需的 props 和事件，这时候就需要用到 vue 实例上的两个属性:$attrs 和$listeners。

代码

二次封装的组件

<template>
    <!-- 
        v-bind="$attrs"：会将传递过来的属性属性值排放在这里，可以看成react里的{...props}展开运算符类似
        v-on="$listeners"：父组件绑定的@事件会传递到这里
    -->
    <el-input v-bind="$attrs" v-on="$listeners"></el-input>
</template>

父组件使用这个组件

<template>
    <HelloWorld placeholder="请输入内容111" @input="handleInput"/>
</template>
<script>
export default {
    methods: {
        handleInput() {
            console.log(1);
        }
    },
    components: {
        HelloWorld: () => import('@/components/HelloWorld.vue')
    }
};
</script>