代码
- 子组件
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>
前端工程师、程序员
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人