在页面组件里用 自定义组件A的slot里用 自定义组件B,自定义组件B的props都为null
- 发布:2020-08-30 18:11
- 更新:2021-06-30 15:32
- 阅读:766
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10 2004专业版
HBuilderX类型: 正式
HBuilderX版本号: 2.8.8
第三方开发者工具版本号: 1.04.2008272
基础库版本号: 2.12.2
项目创建方式: HBuilderX
操作步骤:
预期结果:
props不为null
props不为null
实际结果:
my-check.vue
onClick() {
debugger
return this.$emit('change', !this.check) // 这里为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>
3 个回复
松锅锅 (作者) - 弱鸡
应该说是嵌套slot后,my-component里this.props.myprop为null
松锅锅 (作者) - 弱鸡
貌似是因为嵌套的slot作用域改变了,<my-check :check="form.key7" /> 这里的form不是页面my-page.vue data里的form,而是undefined
n***@163.com
遇到同样问题,请问如何解决?不管我绑定什么属性,子组件得到的始终是null