Slot编译时渲染的bug

SpringHgui commented 6 years ago

Description

[问题描述：当组件中的slot标签有父标签时，若slot的开始标签写在其父标签同一行，即slot的开始标签紧随父标签的开始标签，在同一行，该组件不能被渲染。]

Environment

Platform: [win10]
wepy-cli version: [1.7.1]

[如何重现问题]

组件定义如下：panel.wpy

<template>
<view class="bx_panel">
    <view class="bx_panel_hd"><slot name="title">数据概览</slot></view>
    <view class="bx_panel_bd">
        <slot></slot>
    </view>
</view>
</template>

<script>
import wepy from 'wepy'
export default class Panel extends wepy.component {
    customData = {}
}
</script>

<style>
.bx_panel{
    margin: .4rem;
}

.bx_panel_hd{
    color: blue;
    padding: .2rem;
}

.bx_panel_bd{
    background-color: #fff;
    border-radius: .2rem;
    padding: .7rem;
}
</style>

页面定义如下：panel.wpy

<style lang="less">
</style>

<template>
<view class="page">
   <view class="page__bd">
    <panel>
      <view slot="title">测试数据绑定</view>
      <view>内容</view>
    </panel>
  </view> 
</view>
</template>

<script>
  import wepy from 'wepy'
  import Panel from '../components/panel/panel'

  export default class Index extends wepy.page {
    components = {
      panel: Panel
    };
    onLoad() {
      console.log('onLoad')
    }
  }
</script>

[实际表现]

dist文件夹下渲染的结果

<view class="page">
   <view class="page__bd">
    <view>测试数据绑定</view>
  </view> 
</view>

显示效果 _20180319173711

[期望表现]

dist文件夹下渲染的结果

<view class="page">
   <view class="page__bd">
    <view class="bx_panel">
        <view class="bx_panel_hd"> <view>测试数据绑定</view></view>
        <view class="bx_panel_bd">
          <view>内容</view>
        </view>
    </view>
  </view> 
</view>

显示效果 _20180319174033

[临时解决方案]

[在定义组件时slot的开始标签与父标签之间插入空格，或slot标签换行]

方法1：插入一个空格

<template>
<view class="bx_panel">
    <view class="bx_panel_hd"> <slot name="title">数据概览</slot></view>
    <view class="bx_panel_bd">
        <slot></slot>
    </view>
</view>
</template>

方法2：换行

<template>
<view class="bx_panel">
    <view class="bx_panel_hd"> 
        <slot name="title">数据概览</slot>
    </view>
    <view class="bx_panel_bd">
        <slot></slot>
    </view>
</view>
</template>

sunflower-li commented 6 years ago

同样遇到搞了好久

stale[bot] commented 6 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions. 因为这个 Issue 最近没有任何有效回复，所以被自动标记为了stale。如果在未来7天依旧没有任何激活操作，那么该 Issue 将会被自动关闭。感谢您的提问。

Riant commented 5 years ago

哦，原来如此，我用的是 template(lang="pug")，估计默认所有换行都被移除了，于是，百思不得其解啊。

待会试试

Tencent / wepy