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

在文档上没找到，使用搜索引擎也没见有人发表相关内容。最后在 vuejs/jsx-next 这个 repo 的 README.md 找到了解决方案，在这里分享给各位。

官方文档示例#

注意: 在 jsx 中，应该使用 v-slots 代替 v-slot

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

// or

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

个人示例#

xxx.vue

<van-image
  round
  width="7rem"
  height="7rem"
  fit="cover"
  src="/img/AquaMinato.png"
  style="display: block; margin: 0 auto;"
>
  <template v-slot:loading>
    <van-loading type="spinner" size="20" />
  </template>
  <template v-slot:error>加载失败</template>
</van-image>

这里我虽然用的是 TSX (TypeScript 的 JSX)，但用法应该和 JSX 是一样的。

xxx.tsx

setup() {
  const slots = {
    loading: () => <van-loading type="spinner" size="20" />,
    error: () => <span>加载失败</span>
  }

  return () => (
    <div>
      <van-image
        round
        width="7rem"
        height="7rem"
        fit="cover"
        src="/img/AquaMinato.png"
        style="display: block; margin: 0 auto;"
        v-slots={slots}
      >
      </van-image>
    </div>
  )
}

解构插槽 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>