Vue3 technological sense card background package

image.png

You can just use <slot></slot>the feature, and the WeChat applet is similar in this regard <script>.

export default {
    name: 'CornerDivs',
    mounted() {
    },
};

usage:

<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>

The complete code mycard.vue is as follows: