松锅锅
松锅锅
  • 发布:2020-08-30 18:11
  • 更新:2021-06-30 15:32
  • 阅读:766

【报Bug】自定义组件的slot用另一个自定义组件,props的所有属性为null

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10 2004专业版

HBuilderX类型: 正式

HBuilderX版本号: 2.8.8

第三方开发者工具版本号: 1.04.2008272

基础库版本号: 2.12.2

项目创建方式: HBuilderX

操作步骤:

在页面组件里用 自定义组件A的slot里用 自定义组件B,自定义组件B的props都为null

预期结果:

props不为null

实际结果:

my-check.vue
onClick() {
debugger
return this.$emit('change', !this.check) // 这里为null
},

bug描述:

my-form.vue

 <bjx-form  
      :rules="rules"  
      :form="form"  
      msg-type="msg"  
      labelType="inline"  
      labelWidth="230"  
      ref="form"  
    >  
      <view  
        v-for="(item, index) in option.column"  
        :key="index"  
      >  
        <bjx-form-item  
          :label="item.label"  
          :prop="item.prop"  
        >  
          <template v-if="item.componentType==='slot'">  
            <slot  
              name="prop"  
              :slotData="item"  
            >  
            </slot>  
          </template>  

          <template v-else>  
            <input  
              v-model="form[item.prop]"  
              :type="item.inputType"  
              :maxlength="item.maxlength||-1"  
              :placeholder="item.placeholder"  
            />  
          </template>  
        </bjx-form-item>  
      </view>  
    </bjx-form>

my-check.vue

<template>  
  <view  
    class="flex ac my-check"  
    @tap="onClick"  
  >  
    <view  
      class="icon"  
      :class="{check:check}"  
    />  
    <slot></slot>  
  </view>  
</template>  
<script>  
export default {  
  name: 'MyCheck',  

  props: {  
    check: {  
      type: [Boolean, Number, String],  
      default: false,  
    },  
  },  

  methods: {  
    onClick() {  
      debugger  
      return this.$emit('change', !this.check) // 这里为null  
    },  
  },  
}  
</script>

my-page.vue //这是页面

<my-form  
          formName="form"  
          :option="option1"  
        >  
          <view  
            slot="prop"  
            slot-scope="{slotData}"  
          >  
            <template v-if="slotData.prop==='key3'">  
              <view class="flex ac">  
                <input  
                  :value="form.key3"  
                  @change="form.key3=$event.detail.value"  
                  :maxlength="slotData.maxlength"  
                  :placeholder="slotData.placeholder"  
                />  
                <!-- 这里给mycheck绑定check的值,change可以收到 -->  
                <my-check  
                  :check="form.key7"  
                  @change="form.key7=$event"  
                ><text>测试mycheck</text></my-check>  
              </view>  
            </template>  

          </view>  

  </my-form>  

<!-- 放在my-form外面就没问题 -->  
   <my-check  
                  :check="form.key7"  
                  @change="form.key7=$event"  
                ><text>测试mycheck</text></my-check>
2020-08-30 18:11 负责人:无 分享
已邀请:
松锅锅

松锅锅 (作者) - 弱鸡

<page>  
    <my-form-slot>  
        <my-other-slot>  
            <my-component :myprop="收不到动态的属性"></my-component>  
        </my-other-slot>  
    </my-form-slot>  
</page>

应该说是嵌套slot后,my-component里this.props.myprop为null

松锅锅

松锅锅 (作者) - 弱鸡

貌似是因为嵌套的slot作用域改变了,<my-check :check="form.key7" /> 这里的form不是页面my-page.vue data里的form,而是undefined

n***@163.com

n***@163.com

遇到同样问题,请问如何解决?不管我绑定什么属性,子组件得到的始终是null

该问题目前已经被锁定, 无法添加新回复