joken-前端工程师

  博客园 :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::

代码

  • 子组件
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 2024-10-24 20:46  joken1310  阅读(46)  评论(0编辑  收藏  举报