kaola-fed / megalo

基于 Vue 的小程序开发框架
MIT License
1.63k stars 116 forks source link

第三方小程序组件的 slot 在 vue 组件的非具名 slot 中会失效 #282

Open auven opened 5 years ago

auven commented 5 years ago

代码与复现步骤

首先,基于 megalo-cli 创建一个新项目。

下载 vant-weapp 小程序组件,在 src/main.js 中引入

...
export default {
  config: {
    ...
    usingComponents: {
      'van-cell': 'native/vant-weapp/cell/index',
      'van-cell-group': 'native/vant-weapp/cell-group/index'
    }
  }
}

创建 TestComp 组件,路径 src/components/TestComp

<template>
    <div>
        <slot />
        <slot name="text" />
    </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

修改 src/pages/hello.vue

<template>
  <div class="app">
    <test-comp>
      <div slot="text">
        <van-cell title="我在 slot text 里的">
          <div slot="icon" style="color: red; margin-right: 10px">图标 </div>
        </van-cell>
      </div>
      <van-cell title="测试" value="值" />
      <van-cell title="我在非具名 slot 里">
        <div slot="icon" style="color: red; margin-right: 10px">图标</div>
      </van-cell>
    </test-comp>
  </div>
</template>

<script>
import TestComp from '@/components/TestComp'
export default {
  components: {
    TestComp
  }
}
</script>

<style lang="scss">
</style>

问题现象

这里我使用到了 vant-weapp 的组件,发现它的 slot 在 vue 组件的非具名 slot 中会失效。

image

版本

操作系统信息

macos 10.14.5

Pidbid commented 5 years ago

我采用文件引入方式,slot在panel内使用,同样无效