河北住房和城乡建设厅网站首页,建筑网官网道辉工程建设有限公司,莆田建站服务,搜狐做app的网站本次对el-input进行简单封装进行演示 封装很简单#xff0c;就给激活样式的边框(主要是功能) 本次封装主要使用到vue自带的几个对象 $attrs#xff1a;获取绑定在组件上的所有属性$listeners: 获取绑定在组件上的所有函数方法$slots#xff1a; 获取应用在组件内的所有插槽 … 本次对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、父组件
templatediv classwrapper my-input v-modelval/my-input/div
/templatescriptimport MyInput from /components/MyInputexport default {components: {MyInput,},data() {return {val: 111,}},methods: {inputChange(val){console.log(val);}}}
/scriptstyle langscss scoped.wrapper {padding: 10vh;}
/style1.2、子组件
templateel-input v-bind$attrs/el-input
/template
scriptexport default {created() {console.log(attrs,this.$attrs);}}
/script
style langscss scoped
::v-deep {.el-input__inner:focus {border-color: red;
}
}/style1.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、父组件
templatediv classwrapper my-input v-modelval changeinputChange/my-input/div
/templatescriptimport MyInput from /components/MyInputexport default {components: {MyInput,},data() {return {val: 111,}},methods: {inputChange(val){console.log(inputChange, val);}}}
/script2.2、子组件
templateel-input v-bind$attrs v-on$listeners/el-input
/template
scriptexport default {created() {console.log(attrs,this.$attrs);console.log(listeners,this.$listeners);}}
/script
style langscss scoped
::v-deep {.el-input__inner:focus {border-color: red;}
}/style2.3、效果 这时候搭配$attrs就可以实现v-model的完整效果了以及change函数也会传递过去 3、插槽传递 element的组件也包括了很多的插槽 想要给封装好后的组件使用的插槽传递到el-input中在组件中可以使用this.$attrs获取所有绑定在组件上的插槽这样我们就可以在封装的组件内使用v-for(val, key) in $slots所有插槽遍历放到组件中当作组件的插槽注意插槽传参也要处理(我这里没处理) 3.1、父组件
templatediv classwrapper my-input v-modelval changeinputChangetemplate slotprependHttp:///templateel-button slotappend iconel-icon-search/el-button/my-input/div
/templatescriptimport MyInput from /components/MyInputexport default {components: {MyInput,},data() {return {val: 111,}},methods: {inputChange(val){console.log(inputChange, val);}}}
/scriptstyle langscss scoped.wrapper {padding: 10vh;}
/style3.2、子组件
templateel-input v-bind$attrs v-on$listenerstemplate v-for(val, key) in $slotsslot :namekey/slot/template/el-input
/template
scriptexport default {created() {console.log(attrs,this.$attrs);console.log(listeners,this.$listeners);console.log(slots,this.$slots);}}
/script
style langscss scoped
::v-deep {.el-input__inner:focus {border-color: red;}
}/style3.3、效果 4、ref伪传递(适用于vue3) 为什么说伪传递呢因为在vue中根本就拿不到外层组件的ref属性所以只能另换思路你要用ref无非就是想调用组件里面的函数。那我封装的组件里面可以把被封装的组件的函数直接提取出来当作我封装组件的函数即可实现适用于Vue3vue2会卡死 4.1、父组件
templatediv classwrapper my-input refmuInput v-modelval changeinputChangetemplate slotprependHttp:///templateel-button slotappend iconel-icon-search/el-button/my-input/div
/templatescriptimport MyInput from /components/MyInputexport default {components: {MyInput,},data() {return {val: 111,}},mounted() {this.$refs.muInput.focus()},methods: {inputChange(val){console.log(inputChange, val);}}}
/scriptstyle langscss scoped.wrapper {padding: 10vh;}
/style4.2、子组件
templateel-input refinput v-bind$attrs v-on$listenerstemplate v-for(val, key) in $slots #[key]slot :namekey/slot/template/el-input
/template
scriptexport 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 langscss scoped
::v-deep {.el-input__inner:focus {border-color: red;}
}/style
