uni-app slot在微信小程序不支持v-bind的传参写法

uni-app slot在微信小程序不支持v-bind的传参写法

项目信息 值
产品分类 uniapp/小程序/微信
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 最新
第三方开发者工具版本号 3.0.0
基础库版本号 3.0.0
项目创建方式 CLI
CLI版本号 3.0.0

示例代码：

<slot  
name="cus_com"  
mode="detail"  
value="itemVal"
        v-bind="options"
      />

我这里的options是不固定的，因为cus_com也是不固定的，是动态的，故只能是这么写。

插糟不能使用v-bind，确定的组件反而是可以的。希望尽快支持吧，小程序不支持动态组件component已经非常难受了，难道连传参数都要受到限制吗？

操作步骤：

只要是这种形式都会报错

<slot  
name="cus_com"  
mode="detail"  
value="itemVal"
        v-bind="options"
      />

预期结果：

正常使用，不报错

实际结果：

报错：

[plugin:vite:vue] v-bind="" is not supported.

bug描述：

<slot  
name="cus_com"  
mode="detail"  
value="itemVal"
        v-bind="options"
      />

报错：

[plugin:vite:vue] v-bind="" is not supported.

更多关于uni-app slot在微信小程序不支持v-bind的传参写法的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

有人看么？这个在文档里也没说明不可使用。理论上要支持吧

更多关于uni-app slot在微信小程序不支持v-bind的传参写法的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我有一个曲线救国的法子，可以实现传参 <template v-slot:具名插槽="{参数}" #具名插槽> {{参数}} </template>
发现参数是传递过来了，但是布局被套了一层很讨厌

微信自己好像就不支持吧，微信开发者社区搜这个下面一堆人骂这个不支持，那个也不支持，也不能指望那个平台不支持uniapp编译出来就支持了，巧妇难为无米之炊啊。。只能v-bind自带的组件比如button,image这些。。。心累的很

在 uni-app 中，slot 是用于组件内容分发的重要机制。然而，在微信小程序中，slot 的使用与 Vue.js 中的 slot 有一些差异，尤其是在使用 v-bind 传递参数时，可能会遇到不支持的情况。

问题描述

在 Vue.js 中，你可以使用 v-bind 动态地向 slot 传递参数，例如：

<template>
  <my-component>
    <template v-slot:default="slotProps">
      <div>{{ slotProps.text }}</div>
    </template>
  </my-component>
</template>

然而，在微信小程序中，这种写法可能不被支持，因为微信小程序的 slot 机制与 Vue.js 的 slot 机制不完全一致。

解决方案

为了在 uni-app 中兼容微信小程序的 slot 机制，你可以采用以下替代方案：

  1. 使用 props 传递数据： 将需要传递的数据通过 props 传递给子组件，然后在子组件内部使用 slot。

    <!-- 父组件 -->
<template>
  <my-component :text="text">
    <template v-slot:default>
      <div>{{ text }}</div>
    </template>
  </my-component>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello, World!'
    };
  }
};
</script>

    <!-- 子组件 my-component -->
<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    text: String
  }
};
</script>

  2. 使用 scoped slot 的替代方案： 如果你需要传递多个参数，可以将这些参数封装到一个对象中，然后通过 props 传递。

    <!-- 父组件 -->
<template>
  <my-component :slotProps="slotProps">
    <template v-slot:default="slotProps">
      <div>{{ slotProps.text }}</div>
    </template>
  </my-component>
</template>

<script>
export default {
  data() {
    return {
      slotProps: {
        text: 'Hello, World!'
      }
    };
  }
};
</script>

    <!-- 子组件 my-component -->
<template>
  <div>
    <slot :text="slotProps.text"></slot>
  </div>
</template>

<script>
export default {
  props: {
    slotProps: Object
  }
};
</script>

  3. 使用 event 传递数据： 如果需要在子组件中触发事件并传递数据，可以使用 $emit 方法。

    <!-- 父组件 -->
<template>
  <my-component @custom-event="handleEvent">
    <template v-slot:default>
      <div>{{ eventData }}</div>
    </template>
  </my-component>
</template>

<script>
export default {
  data() {
    return {
      eventData: ''
    };
  },
  methods: {
    handleEvent(data) {
      this.eventData = data;
    }
  }
};
</script>

    <!-- 子组件 my-component -->
<template>
  <div>
    <slot></slot>
    <button @click="triggerEvent">Trigger Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello, World!');
    }
  }
};
</script>
回到顶部