vue+tsx+slot

榴莲不好吃

已于 2022-04-20 16:31:57 修改

阅读量2.9k

点赞数

分类专栏： vue 文章标签： vue.js

于 2022-04-20 16:29:35 首次发布

本文链接：https://blog.youkuaiyun.com/sllailcp/article/details/124300607

版权

vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了Vue组件的定义与使用，展示了如何通过插槽传递默认内容和自定义标题。组件`children`接收默认数据和title插槽，允许外部注入内容。在父组件中，可以通过`v-slots`来传递`default`和`title`插槽内容，实现内容的渲染。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件接受默认的数据以及一个title

import { defineComponent } from "vue";

export default defineComponent({
  name: "children",
  setup(props, { emit, slots }) {
    return () => {
      return <div class="children">
        {slots.default ? slots.default() : null}
        {slots.title ? slots.title() : null}
        <div class="add-btn">add-btn</div>
      </div>
    }
  }
})

调用,组件包裹的形式显示默认的插槽

import Children from './chidren.tsx';

setup(props, { emit, slots }) {
  return () => {
      return <div class="parent">
        <Children >
			default
         </Children >
      </div>
  }
}

浏览器渲染:

在这里插入图片描述

调用, v-slots传入default和title对象

setup(props, { emit, slots }) {
	function DefaultRender() {
      return 'default'
    }
    function TitleRender() {
      return 'title'
    }

  return () => {
      return <div class="parent">
        <Children  v-slots={{
          default: DefaultRender,
          title: TitleRender
         }}/> 
      </div>
  }
}