vue 3.0 slot 使用方法

1：首先新建一个post组件

import { defineComponent, PropType } from 'vue'
//引入外部样式
import '../styles/post.css'
//定义传入组件数据的类型
interface Post {
    title: string,
    content: string,
}
export default defineComponent({
    name: 'post',
    props: {
        blog: {
            type: Object as PropType<Post>,
            default: () => {
                return {}
            }
        }
    },
    setup(props, { slots }) {
        return () => {
            return <div class="wrapper">
                <p>我是默认插槽:{slots.default && slots.default()}</p>
                <p>我是具名插槽:{slots.foo && slots.foo()}</p>
                <p>我是父组件传进来的参数:{props.blog.title}---{props.blog.content}</p>
            </div>
        }
    }
})

2：然后在父组件中使用该组件

import { defineComponent, h, reactive, ref } from 'vue'
import post from './components/post'
const img = require('./assets/logo.png')//eslint-disable-line
export default defineComponent({
    compoments: {
        post
    },
    setup() {
        //父组件传入子组件插槽的内容
        const slots = {
            default: () => <span>default 默认插槽</span>,
            foo: () => <span>foo 具名插槽</span>
        }
        //父组件传入子组件的数据
        const blogData = reactive({
            title: '我是博客的标题',
            content: '我是博客的内容'
        })
        return () => {
            return <div id="app">
                <img src={img} alt="Welcome to Your Vue.js + TypeScript App" />
                <post v-slots={slots} blog={blogData}>
                </post>
            </div>
        }
    }
})