工作实战：Vue关于ElementUI二次封装的问题

最新推荐文章于 2024-08-21 23:47:35 发布

不爱编程的小方

最新推荐文章于 2024-08-21 23:47:35 发布

阅读量1.4k

点赞数 4

分类专栏： Vue 工作实战文章标签： vue.js elementui

本文链接：https://blog.csdn.net/qq_38053677/article/details/130001749

版权

工作实战同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Vue

1 篇文章 0 订阅

订阅专栏

文章介绍了在Vue.js中处理组件间属性、插槽和ref引用的方法。通过v-bind使用$attrs实现属性的批量传递，$slots用于处理插槽内容，包括作用域插槽。同时，展示了如何将子组件的方法绑定到实例上，以便于父组件通过ref引用操作。

摘要由CSDN通过智能技术生成

第一个问题：属性的传递

解决方法：用v-bind="$attrs"批量属性传值的方法，学过react的都知道，类似于{…props}批量传值。有的属性可能需要二次处理，可以使用props接收，props过来的属性，不会出现在$attrs里了。你可以单独处理后再放回elementui的原生组件里了

// MyInput.vue

<template class="my-input">
	<el-input v-bind="$attrs"></el-input>
</template>

<style scoped>
.my-input{
	transition:0.3s;
}

.my-input:hover,
.my-input:focus-within{
	filter:drop-shadow(0 0 3px raba())
}
</style>

// App.vue
<template>
	<div>
		<MyInput v-model="data"></MyInput>
	</div>
</template>

<script setup>
import MyInput from './components/MyInput.vue'

const data = ref("")

</script>

第二个问题：插槽的传递

解决方法：用$slots批量传递插槽，同时要考虑作用域插槽的传递

// MyInput.vue

<template class="my-input">
	<el-input v-bind="$attrs">
		<template v-for="(value,name) in $slots" #[name]="slotData"> // 这里的slotData是el-input组件提供的数据
			<slot :name="name" v-bind="slotData || {}"></slot>
		</template>
	</el-input>
</template>

<style scoped>
.my-input{
	transition:0.3s;
}

.my-input:hover,
.my-input:focus-within{
	filter:drop-shadow(0 0 3px raba())
}
</style>

// App.vue
<template>
	<div>
		<MyInput v-model="data">
			<template #prepend>
				<el-select placeholder="Select" style="width:115px">
					<el-option label="Key1" value="1" />
					<el-option label="Key2" value="2" />
				</el-select>
			</template>
			<template #append>
				<el-button :icon="Search">
			</template>
		</MyInput>
	</div>
</template>

<script setup>
import MyInput from './components/MyInput.vue'

const data = ref("")

</script>

第三个问题：ref引用的问题

解决方法：将子组件的方法给绑定到子组件的实例上，然后获取子组件的实例就可，注意组合式和声明写法是有区别的

<template class="my-input">
	<el-input ref="inp" v-bind="$attrs"></el-input>
</template>

<script>
 // 声明式写法
 export default {
	mounted(){
		const entries = Object.entries(this.$refs.inp)
		for(const [key,value] of entries){
			this[key] = value;
		}
	}	
 }
</script>

<script setup>
	// 组合式写法
	const exposeMethods = {}
	const entries = Object.entries(this.$refs.inp)
	for(const [key,value] of entries){
		exposeMethods[key] = value;
	}
	defineExpose(exposeMethods)
</script>

<style scoped>
.my-input{
	transition:0.3s;
}

.my-input:hover,
.my-input:focus-within{
	filter:drop-shadow(0 0 3px raba())
}
</style>

// App.vue
<template>
	<div>
		// 暴漏的是MyInput组件的实例对象
		<MyInput v-model="data" ref="inputRef"></MyInput>
	</div>
</template>

<script setup>
import MyInput from './components/MyInput.vue'

const data = ref("")
const inputRef = ref(null) 

</script>