vue 插槽的使用

父组件

<template>
  <div id="app">
    父页面
    <hr>
    <HelloWorld1>
      <template #s1>
          {
     {
      width }}
      </template>
      <template v-slot:s2>
          {
     {
      hight }}
      </template>
    </HelloWorld1>
  </div>
</template>
<script>
import HelloWorld1 from "./HelloWorld1";

export default {
     
  name: "App",
  data() {
     
    return {
     
      width: 500,
      hight: 1000,
    };
  },components: {
     
    HelloWorld1
  }
};
</script>

子组件

<template>
  <div>
    <slot name="s1">自己默认吧...</slot><br>
    <slot name="s2">自己默认吧...</slot><br>
    <slot name="s3">自己默认吧...</slot><br>
  </div>
</template>>