柚子898
柚子898
  • 发布:2021-11-08 18:46
  • 更新:2021-11-08 18:47
  • 阅读:655

【报Bug】@vue/composition-api 下 slot 组件 赋值报错

分类:uni-app

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

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.3.1

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

基础库版本号: 2.18.0

项目创建方式: CLI

CLI版本号: 2.0.0-32920211029004

示例代码:

组件

<template>
<view>
<slot />
</view>
</template>

<script>
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
name: 'form-list',
});
</script>

页面

<template>
<view class="qt-padding-left--lg qt-padding-right--lg qt-bg--white">
<form-list>
<input :value="asd" @input="onInput(item, index, $event)" />
</form-list>
</view>
</template>

<script>
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api';
import FormList from './asd';

export default defineComponent({
name: 'form-grid',

//ifdef MP-WEIXIN
options: {
styleIsolation: 'shared',
},
//endif

props: {
// 表单显示数据
grid: {
required: true,
type: Array,
default: () => {
return [];
},
},

// label位置  
inputAlign: {  
  default: 'left',  
  type: String,  
},  

// 格式化数据  
formatValues: {  
  type: Function,  
  default: value => value,  
},  

// 自动光标跳转  
isAutoNext: {  
  type: Boolean,  
  default: true,  
},  

// 自定义组件  
rowCompMap: {  
  type: Object,  
},  

// lable校验颜色显示  
requiredColor: {  
  type: Boolean,  
  default: true,  
},  

// 跳转范围  
nextScope: {  
  type: Array,  
  default: () => {  
    return [];  
  },  
},  

},

components: {
FormList,
},

setup() {
const aaa = reactive({
asd: '',
});

const formListRef = ref(null);  

/**  
 * @description: 输入框发送数据  
 * @param {*} value  
 * @param {*} index  
 * @param {*} item  
 * @return {void} null  
 */  
function onInput(item, index, event) {  
  console.log(event);  
  aaa.asd = event.detail.value;  
}  

return {  
  onInput,  
  ...toRefs(aaa),  
};  

},
});
</script>

操作步骤:

嵌套组件后输入值报错

预期结果:

vue2 语法正常,composition 语法不正常

实际结果:

应该都是正常的

bug描述:

使用 composition-api 封装组件 使用slot 后,子组件里无法赋值, 报错找不到toJSON

Property or method "toJSON" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

"scopedSlotsCompiler": "legacy", 插槽模式切换了仍然不行

2021-11-08 18:46 负责人:无 分享
已邀请:
柚子898

柚子898 (作者)

<template>
<view>
<slot />
</view>
</template>

<script>
import { defineComponent } from '@vue/composition-api';

export default defineComponent({
name: 'form-list',
});
</script>

<template>
<view class="qt-padding-left--lg qt-padding-right--lg qt-bg--white">
<form-list ref="formListRef">
<input :value="asd" @input="onInput(item, index, $event)" />
</form-list>
</view>
</template>

<script>
import { defineComponent, reactive, toRefs, ref } from '@vue/composition-api';
import FormList from './form-list';

export default defineComponent({
name: 'form-grid',

//ifdef MP-WEIXIN
options: {
styleIsolation: 'shared',
},
//endif

props: {
// 表单显示数据
grid: {
required: true,
type: Array,
default: () => {
return [];
},
},

// label位置  
inputAlign: {  
  default: 'left',  
  type: String,  
},  

// 格式化数据  
formatValues: {  
  type: Function,  
  default: value => value,  
},  

// 自动光标跳转  
isAutoNext: {  
  type: Boolean,  
  default: true,  
},  

// 自定义组件  
rowCompMap: {  
  type: Object,  
},  

// lable校验颜色显示  
requiredColor: {  
  type: Boolean,  
  default: true,  
},  

// 跳转范围  
nextScope: {  
  type: Array,  
  default: () => {  
    return [];  
  },  
},  

},

components: {
FormList,
},

setup() {
const aaa = reactive({
asd: '',
});

const formListRef = ref(null);  

/**  
 * @description: 输入框发送数据  
 * @param {*} value  
 * @param {*} index  
 * @param {*} item  
 * @return {void} null  
 */  
function onInput(item, index, event) {  
  console.log(event);  
  aaa.asd = event.detail.value;  
}  

return {  
  onInput,  
  formListRef,  
  ...toRefs(aaa),  
};  

},
});
</script>

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