vue组件二次封装

vue演练场：Vue SFC Playground

有组件如下：

它接受

1. props：msg
2. 命名插槽 header
3. 作用域插槽

<script setup>
const greetingMessage = 'hello'
const props=defineProps({
	msg:{
		type:String,
		default:"默认msg props"
	}
})
</script>

<template>
  <div>
		<h1>{{msg}}</h1>
  	<slot :text="greetingMessage" :count="1"></slot>
		<div style="border:1px solid red">
		<slot name="header">默认header</slot>
		</div>
	</div>
</template>

直接使用

<script setup>
import MyComponent from './MyComponent.vue'
import Comp2 from './Comp2.vue';
</script>

<template>
	<MyComponent v-slot="slotProps">
  	{{ slotProps.text }} {{ slotProps.count }}
  </MyComponent>

	
	</Comp2>
		

</template>

二次封装组件

对原来的MyComponent再封装一次

强烈二次封装使用export default方式的鞋，不要用setup，会多好多声明代码

<script>
import MyComponent from './MyComponent.vue';
export default {
  components:{MyComponent}
}
</script>

<template>
  <MyComponent v-bind="$attrs">
    <template v-for="(item,name) in $slots" #[name]="slotData">
      <slot :name="name" v-bind="slotData"></slot>
    </template>
  </MyComponent>
</template>

二次封装的组件的使用

<script setup>
import MyComponent from './MyComponent.vue'
import Comp2 from './Comp2.vue';
</script>

<template>
	<MyComponent v-slot="slotProps">
  	{{ slotProps.text }} {{ slotProps.count }}
  </MyComponent>
	<div style="height:200px"></div>
	<Comp2 />
	
		<div style="height:200px">下面是传递了参数和slot的</div>
	<Comp2 >
		<template v-slot:header>
			我是自定义头内容
		</template>
		<!-- 自定义作用域插槽 -->
		<template v-slot:default="slotProps">
				<div>default变了{{ slotProps.text }} {{ slotProps.count }}</div>
		</template>
		<template v-slot:head="slotProps">
				<div>头变了：{{ slotProps.text }} {{ slotProps.count }}</div>
		</template>
	
	</Comp2>
		

</template>