当前位置：首页 > news >正文

Vue-组件二次封装

news 2025/7/15 17:51:51

本次对el-input进行简单封装进行演示

封装很简单，就给激活样式的边框(主要是功能)

本次封装主要使用到vue自带的几个对象

$attrs：获取绑定在组件上的所有属性
$listeners: 获取绑定在组件上的所有函数方法
$slots：获取应用在组件内的所有插槽

1、属性传递

element 的input组件有很多属性，

想要实现在封装好后的组件上使用el-input组件的属性，会直接传递到el-input组件上，包括v-model。
在组件中，可以使用this.$attrs获取所有绑定在组件上的属性(不包括方法)
这样，我们就可以在封装的组件内，使用v-bind="$attrs"，直接把属性传递到内部组件上。
在下列案例中，由于v-model是:value 和 @input两个组合的语法糖，$attrs只能获取属性，所以只能传递:value属性

1.1、父组件

<template><div class="wrapper"> <my-input v-model="val"></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},methods: {inputChange(val){console.log(val);}}}
</script><style lang="scss" scoped>.wrapper {padding: 10vh;}
</style>

1.2、子组件

<template><el-input v-bind="$attrs"></el-input>
</template>
<script>export default {created() {console.log("attrs：",this.$attrs);}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;
}
}</style>

1.3、效果

这时候给输入框输入值是无效的，因为目前只能把value属性绑定到el-input上，并没有把input函数绑定上去，所以不能修改父组件传过来的value的值。

在这里插入图片描述

2、方法传递

element的组件，也有很多方法，比如：change等函数

想要实现在封装好后的组件上使用el-input组件的方法，会直接传递到el-input组件上。
在组件中，可以使用this.$listeners获取所有绑定在组件上的属性(不包括属性)
这样，我们就可以在封装的组件内，使用v-on="$listeners"，直接把方法传递到内部组件上。
在下列案例中，由于v-model是:value 和 @input两个组合的语法糖，$listeners只能获取属性，所以结合上面$attrsjiu可以完整的实现v-model的效果了

2.1、父组件

<template><div class="wrapper"> <my-input v-model="val" @change="inputChange"></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},methods: {inputChange(val){console.log("inputChange：", val);}}}
</script>

2.2、子组件

<template><el-input v-bind="$attrs" v-on="$listeners"></el-input>
</template>
<script>export default {created() {console.log("attrs：",this.$attrs);console.log("listeners：",this.$listeners);}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;}
}</style>

2.3、效果

这时候搭配$attrs就可以实现v-model的完整效果了，以及@change函数也会传递过去

在这里插入图片描述

3、插槽传递

element的组件，也包括了很多的插槽

想要给封装好后的组件，使用的插槽，传递到el-input中
在组件中，可以使用this.$attrs获取所有绑定在组件上的插槽
这样，我们就可以在封装的组件内，使用v-for="(val, key) in $slots"，所有插槽，遍历放到组件中，当作组件的插槽
注意插槽传参也要处理(我这里没处理)

3.1、父组件

<template><div class="wrapper"> <my-input v-model="val" @change="inputChange"><template slot="prepend">Http://</template><el-button slot="append" icon="el-icon-search"></el-button></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},methods: {inputChange(val){console.log("inputChange：", val);}}}
</script><style lang="scss" scoped>.wrapper {padding: 10vh;}
</style>

3.2、子组件

<template><el-input v-bind="$attrs" v-on="$listeners"><template v-for="(val, key) in $slots"><slot :name="key"></slot></template></el-input>
</template>
<script>export default {created() {console.log("attrs：",this.$attrs);console.log("listeners：",this.$listeners);console.log("slots",this.$slots);}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;}
}</style>

3.3、效果

在这里插入图片描述

4、ref伪传递(适用于vue3)

为什么说伪传递呢，因为在vue中，根本就拿不到外层组件的ref属性，所以只能另换思路
你要用ref，无非就是想调用组件里面的函数。那我封装的组件里面，可以把被封装的组件的函数，直接提取出来，当作我封装组件的函数即可实现
适用于Vue3，vue2会卡死

4.1、父组件

<template><div class="wrapper"> <my-input ref="muInput" v-model="val" @change="inputChange"><template slot="prepend">Http://</template><el-button slot="append" icon="el-icon-search"></el-button></my-input></div>
</template><script>import MyInput from '@/components/MyInput'export default {components: {MyInput,},data() {return {val: '111',}},mounted() {this.$refs.muInput.focus()},methods: {inputChange(val){console.log("inputChange：", val);}}}
</script><style lang="scss" scoped>.wrapper {padding: 10vh;}
</style>

4.2、子组件

<template><el-input ref="input" v-bind="$attrs" v-on="$listeners"><template v-for="(val, key) in $slots" #[key]><slot :name="key"></slot></template></el-input>
</template>
<script>export default {mounted() {console.log("attrs：",this.$attrs);console.log("listeners：",this.$listeners);console.log("slots",this.$slots);for (const [key, value] of Object.entries(this.$refs.input)) {this[key] = value}}}
</script>
<style lang="scss" scoped>
::v-deep {.el-input__inner:focus {border-color: red;}
}</style>