vue组件二次封装

vue演练场：Vue SFC Playground

有组件如下：

它接受

props：msg命名插槽 header作用域插槽 <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>