Vue3.0在JSX/TSX下如何使用插槽(slot)

在Vue的文檔上沒找到，使用搜索引擎搜索也未見有人發表過相關的內容。最后我在vuejs/jsx-next這個repo的README.md找到了解決方案，在這里分享給大家。

官方文檔示例

注意: 在 jsx 中，應該使用 v-slots 代替 v-slot

const A = (props, { slots }) => (
  <>
    <h1>{ slots.default ? slots.default() : 'foo' }</h1>
    <h2>{ slots.bar?.() }</h2>
  </>
);

const App = {
  setup() {
    const slots = {
      bar: () => <span>B</span>,
    };
    return () => (
      <A v-slots={slots}>
        <div>A</div>
      </A>
    );
  },
};

// or

const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>,
      bar: () => <span>B</span>,
    };
    return () => <A v-slots={slots} />;
  },
};

// or
const App = {
  setup() {
    return () => (
      <>
        <A>
          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>,
          }}
        </A>
        <B>{() => "foo"}</B>
      </>
    );
  },
};

解構插槽Props

在template寫法中：

<router-link
  to="/about"
  custom
  v-slot="{ href, route, navigate, isActive, isExactActive }"
>
  <NavLink :active="isActive" :href="href" @click="navigate">
    {{ route.fullPath }}
  </NavLink>
</router-link>

在JSX寫法中可以則可以是這樣：

<router-link
  to="/about"
  custom
>
  {{
    default: ({ href, route, navigate, isActive, isExactActive }) => (
      <NavLink active={isActive} href={href} click={navigate}>
        { route.fullPath }
      </NavLink>
    )
  }}
</router-link>