vue tsx slots传入方式
代码
- 子组件
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>
前端工程师、程序员