插槽:1.默认，2.具名，3.作用域

 

<template>
  <div>
    <h1>我是组件demo</h1>
    <div>
      <!-- 在封装组件时,为预留的<slot>提供属性对应的值,这种用法,叫做作用域插槽 -->
      <slot name="head" :head="head"></slot>
      <slot 
        name="content" 
        content="以下是子组件插槽作用域的值传递的值" 
        :user="user"
      ></slot>
      <slot name="footer"></slot>
　　　　<slot name="footer2"></slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const head = ref('这个是一个标题')
const user = ref({
  name: '张三',
  age: '18'
})
</script><template>

  <div class="home">
    <h1>我是-------Home----</h1>
    <Demo>
    //在slot后面用接收;接收的是是一个对象
      <template #head="scope">
        <p>我是头部 --{{ scope.head }}</p>
      </template>
      //解构赋值写法
      <template #content="{ content, user }">
        <div style="outline:1px solid red">
          <p>我是内容</p>
          <p>{{ content }}</p>
          <p>姓名:{{ user.name }}</p>
          <p>年龄:{{ user.age }}</p>
        </div>
      </template>
      <template #footer>
        <p>我是页脚</p>
      </template>
　　　　<template v-slot:[lotname]> </template>//动态插槽名字
    </Demo>
  </div>
</template>
<script setup>
import Demo from '../components/demo/index.vue'
const name = ref('Home')
const lotname = ref('footer2')
</script>