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