Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Vue3微信小程序v-for动态绑定插槽解析问题 #5269

Open
c-sopoo opened this issue Dec 24, 2024 · 0 comments
Open

Vue3微信小程序v-for动态绑定插槽解析问题 #5269

c-sopoo opened this issue Dec 24, 2024 · 0 comments

Comments

@c-sopoo
Copy link

c-sopoo commented Dec 24, 2024

组件模板:

<template v-for="(col, i) in columns" :key="col.prop">
      <view
        class="table-body-cell cell"
        :class="[`cell-fixed-${col.fixed}`]"
        :style="{ width: col.width, textAlign: col.align }"
      >
        <view class="cell-wrapper">
          <view class="cell-content stock-item-content f32" :class="col.prop">
            <!-- 自定义插槽 -->
            <template v-if="col.slot && $slots[col.slot]">
              <slot :name="col.slot" :data="dataItem"></slot>
            </template>
            <template v-else>
              <view>2</view>
......

image

使用组件:

<template v-for="item in stocks[currentTabItem.id]" :key="item.code">
        <stock-table-row  :dataItem="item">
          <template #name="{ data }">
            <view class="stock-name flex y">
              123
              <view>{{ data.name }}</view>
            </view>
          </template>
          <template #chart="{ data }">
            <view class="stock-name flex y">
              <view>{{ data.code }}</view>
            </view>
          </template>
......

image

微信小程序解析:
image
image

HBuilderX 4.36

可以看到,解析后的插槽名变了,如何能正确渲染?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant