利用<slot></slot>
特性即可,这方面微信小程序也是差不多的玩法在<script>
中
export default {
name: 'CornerDivs',
mounted() {
},
};
用法:
<template>
33333333333333
<CornerDivs>
<div style="width: 50px;height: 200px;" >
fffffffffff
</div>
</CornerDivs>
<CornerDivs>
<div style="width: 50px;height: 200px;" >
fffffffffff
</div>
</CornerDivs>
<CornerDivs>
<div style="width: 50px;height: 200px;" >
fffffffffff
</div>
</CornerDivs>
<CornerDivs>
<div style="width: 50px;height: 200px;" >
fffffffffff
</div>
</CornerDivs>
<CornerDivs>
<div style="width: 50px;height: 200px;" >
fffffffffff
</div>
</CornerDivs>
</template>
<script setup>
import { ref } from "vue";
import CornerDivs from '../../components/mycard.vue';
</script>
<style>
</style>
完整代码mycard.vue如下: