Vue3中，使用TSX/JSX編寫的父元件，如何向子元件中傳遞具名插槽(slot)的內容

樊顺發表於2024-07-15
VueJS元件

子元件（Child） - 模板程式碼：

<template>
  <div class="child-component">
    <div class="header-box">
      <slot name="header"></slot>
    </div>
    <slot></slot>
  </div>
</template>

該子元件中可以接收一個header模組的插槽內容(1)和預設的插槽內容(2)

* 如果我們想在一個使用TSX語法編寫的父元件中向Child元件填充插槽內容 可以參考一下兩種方式：

父元件 - 例項程式碼（TSX）- 方式1

import Child from './Child.vue'

export const F = defineComponent({
  name: 'F',
  setup(props, ctx) {
    return () => {
      return <div class="parent-component-wrapper">
        <Child>
          {{
            header: () => <div>header slot content</div>,
            default: () => <div>default children content</div>,
          }}
        </Child>
      </div>
    };
  },
});

父元件 - 例項程式碼（TSX）- 方式2

import Child from './Child.vue'

export const F = defineComponent({
  name: 'F',
  setup(props, ctx) {
    return () => {
      return <div class="parent-component-wrapper">
        <Child
          v-slots={{
            header: () => <div>header slot content</div>,
            default: () => <div>default children content</div>,
          }}
        />
      </div>
    };
  },
});

相關文章