vue3 组件的二次封装(保留其属性和事件,插槽,方法)

发布时间:2023年12月28日

vue3 组件的二次封装

基础组件

模拟封装一个基础组件,包含
一个 base 事件,一个 title 属性,
默认插槽和 foote r插槽
暴漏 close open 方法
x-base

<script lang="ts" setup>
defineProps<{ title: string }>();
const emit = defineEmits<{
	base: [];
}>();
function close() {
	console.log("close");
}
function open() {
	console.log("open");
}
defineExpose({ close, open });
</script>

<template>
	<div>
		<h2 @click="emit('base')">{{ title }}</h2>
		<div class="default"><slot></slot></div>
		<div class="footer"><slot name="footer" msg="base组件 footer 插槽内容"></slot></div>
	</div>
</template>

<style lang="scss" scoped></style>

二次封装

基于 x-base 组件二次封装演示
x-test

<script lang="ts">
import { useSlots, onMounted, ref, defineComponent } from "vue";
import xBase from "../x-base/index.vue";
export default defineComponent({
	mounted() {
		for (const key in this.$refs.baseRef) {
			this[key] = this.$refs.baseRef[key];
		}
	},
});
</script>

<template>
	<div>
		<x-base v-bind="$attrs" ref="baseRef">
			<!-- <template></template> -->
			<!-- <template #footer="scope"></template> -->
			<template v-for="(value, key) in $slots" :key="key" #[key]="scope">
				<slot :name="key" v-bind="scope"></slot>
			</template>
		</x-base>
	</div>
</template>

<style lang="scss" scoped></style>

app.vue 使用

<script lang="ts" setup>
import { ref } from "vue";
import xTest from "./components/x-test/index.vue";
const xTestRef = ref<InstanceType<typeof xTest> | null>(null);

function close() {
	xTestRef.value?.close();
}
</script>
<template>
	<x-test title="base" @base="console.log(123)" ref="xTestRef">
		<template #default>default</template>
		<template #footer="scope">footer--{{ scope }}</template>
	</x-test>
	<button @click="close">关闭</button>
</template>

<style lang="scss" scoped></style>

解决属性和事件

$attrs 一个包含了组件所有透传 attributes 的对象。
透传 Attributes 是指由父组件传入,且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。

<x-base v-bind="$attrs"></x-base>

解决插槽

$slots 一个表示父组件所传入插槽的对象。
对象 key 即是插槽名称

<x-base v-bind="$attrs">
	<!-- <template #default></template> -->
	<!-- <template #footer="scope"></template> -->
	// 参照上面写法容易理解
	<template v-for="(value, key) in $slots" :key="key" #[key]>
		<slot :name="key"></slot>
	</template>
</x-base>

作用域插槽

<x-base v-bind="$attrs">
	<template v-for="(value, key) in $slots" :key="key" #[key]="scope">
		<slot :name="key" v-bind="scope"></slot>
	</template>
</x-base>

ref 方法使用

<x-base v-bind="$attrs" ref="baseRef"></x-base>
export default defineComponent({
	mounted() {
		for (const key in this.$refs.baseRef) {
			this[key] = this.$refs.baseRef[key];
		}
	},
});

使用

<script lang="ts" setup>
import { ref } from "vue";
import xTest from "./components/x-test/index.vue";
const xTestRef = ref<InstanceType<typeof xTest> | null>(null);

function close() {
	xTestRef.value?.close();
}
</script>
<template>
	<x-test title="base" @base="console.log(123)" ref="xTestRef">
		<template #default>default</template>
		<template #footer="scope">footer--{{ scope }}</template>
	</x-test>
	<button @click="close">关闭</button>
</template>

<style lang="scss" scoped></style>

文章来源:https://blog.csdn.net/weixin_43512977/article/details/135210217
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。