joken-前端工程师

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::
  404 随笔 :: 39 文章 :: 8 评论 :: 20万 阅读

代码

  • 子组件
import { defineComponent, PropType } from 'vue';

const MyComponent = defineComponent({
    name: 'MyComponent',
    props: {
        title: {
            type: String as PropType<string>,
            required: true
        }
    },
    setup(props, { slots }) {
        return () => (
            <div>
                <h1>{props.title}</h1>
                <div>
                    {/* 渲染名为 "header" 的插槽 */}
                    {slots.header ? slots.header() : <p>默认头部内容</p>}
                </div>
                <div>
                    {/* 渲染名为 "footer" 的插槽 */}
                    {slots.footer ? slots.footer() : <p>默认底部内容</p>}
                </div>
            </div>
        );
    }
});

export default MyComponent;

  • 父组件传入方式
<script lang="tsx">
import { defineComponent } from 'vue';
import MyComponent from './components/childAbc';

const App = defineComponent({
  name: 'App',
  setup() {
    return () => (
      <div>
        <MyComponent title="欢迎" v-slots={{
          header: () => <h2>这是自定义头部内容</h2>,
          footer: () => <p>这是自定义底部内容</p>,
        }} />
      </div>
    );
  },
});

export default App;
</script>
posted on   joken1310  阅读(42)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示