Vue 二次封装组件的方法

HaoOuBa
2021-07-06 / 2 评论 / 564 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年07月06日,已超过510天没有更新,若内容或图片失效,请留言反馈。

介绍

有的时候我们全局引用 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>
5

评论 (2)

取消
  1. 头像
    hhh
    Windows 10 · Google Chrome

    表情表情

    回复
  2. 头像
    555
    iPhone · Safari

    测试

    回复