VUE_UI组件的二次封装

属性和事件

<template><div><myInput a="1" b="2" c="3" @change="() => {}"></myInput></div>
</template>

myInput.vue

<template><div><el-input v-bind="$attrs"></el-input></div>
</template><script>export default {// 已经申明的属性和事件在this.$attrs中无法获取props: ['a'],emits: ['change'],mounted() {// 获取所有属性和事件console.log(this.$attrs)}}
</script>

插槽

<template><div><myInput><template #prepend>prepend</template><template #append>after</template><template #suffix>suf</template><template #prefix>pre</template></myInput></div>
</template>

myInput.vue

<template><div><el-input><template v-for="(_, name) in $slots" #[name]="scopedData"><slot :name="name" v-bind="scopedData"></slot></template></el-input></div>
</template><script>export default {mounted() {// 获取所有插槽console.log(this.$slots)}}
</script>

ref

<template><div><myInput ref="inp"></myInput></div>
</template>
<script>export default {mounted() {// 获取myInput组件focus事件console.log(this.$refs.inp.focus)this.$refs.inp.focus()}}
</script>

myInput.vue

<template><div><el-input ref="elInp"></el-input></div>
</template><script>export default {mounted() {for (var key in this.$refs.elInp) {this[key] = this.$refs.elInp[key]}}}
</script>

.