Vue 插槽

原页面代码

修改为组件插槽后代码

插槽代码

article.vue

<template>
     <div style="border:1px solid">
        <!-- 标题和作者 -->
        <h1>{{title}}</h1>
        <h5>{{ writer }}</h5>
        <!-- 文章内容 -->
        <slot></slot>
    </div>
</template>

<script setup>
// 定义props
defineProps({
    // 标题
    title:{
        type:String
    },
    // 作者
    writer:{
        type:String
    }
})

</script>

使用演示

<template>
    <!-- 测试插槽组件 -->
    <Article title="Java从入门到入土" writer="xyy123">
        <p>第一段</p>
        <p>第二段</p>
    </article>
   
    <Article title="MySQL从删库到跑路" writer="xyy456">
        <p>xxxxxxxx</p>
        <p>xxxxxxxx</p>
    </article>

    <Article title="C++从入门到脊椎病康复" writer="xyy789">
        <p>yyyyyyy</p>
        <p>yyyyyyy</p>
    </article>

</template>

<script setup>
import Article from "./components/article.vue"
</script>