uni-app @vue/composition-api 下 slot 组件 赋值报错

uni-app @vue/composition-api 下 slot 组件 赋值报错

开发环境 版本号 项目创建方式
Mac 11.3.1 CLI

示例代码：

组件

```html
<template>
<view>
<slot />
</view>
</template>  

<script>
import { defineComponent } from '[@vue](/user/vue)/composition-api';  
</script>

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

页面

```html
<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](/user/vue)/composition-api';
import FormList from './asd';
</script>

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

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


```html
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 [];
},
},


```html
},

components: { FormList, },


```html
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),
};


```html
},
</script>

更多关于uni-app @vue/composition-api 下 slot 组件 赋值报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复
<template> <view> <slot /> </view> </template> <script> import { defineComponent } from '[@vue](/user/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](/user/input)="onInput(item, index, $event)" /> </form-list> </view> </template> <script> import { defineComponent, reactive, toRefs, ref } from '[@vue](/user/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>

更多关于uni-app @vue/composition-api 下 slot 组件 赋值报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 [@vue](/user/vue)/composition-api 中使用 slot 时，你的代码存在几个关键问题：

  1. slot 作用域问题：父组件向 slot 传递的 asd 和 onInput 在子组件中无法直接访问
  2. 事件处理方式错误：在 uni-app 中，小程序平台的事件对象结构不同

解决方案：

子组件修改（form-list）：

<template>
<view>
<slot :value="value" :onInput="handleInput" />
</view>
</template>

<script>
import { defineComponent } from '[@vue](/user/vue)/composition-api';

export default defineComponent({
  name: 'form-list',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  emits: ['input'],
  setup(props, { emit }) {
    const handleInput = (value) => {
      emit('input', value);
    };
    
    return {
      handleInput
    };
  }
});
</script>

父组件修改：

<template>
<view>
<form-list v-model="asd">
<template #default="{ value, onInput }">
  <input :value="value" [@input](/user/input)="(e) => onInput(e.detail.value)" />
</template>
</form-list>
</view>
</template>

<script>
import { defineComponent, ref } from '[@vue](/user/vue)/composition-api';

export default defineComponent({
  setup() {
    const asd = ref('');
    
    return {
      asd
    };
  }
});
</script>
回到顶部