uni-app 使用动态插槽时，在template中使用计算属性传参会导致插槽不显示

uni-app 使用动态插槽时，在template中使用计算属性传参会导致插槽不显示

开发环境 版本号 项目创建方式
Windows 11 家庭中文版 21H2 CLI

示例代码：

<template>  
  <view>  
    <view v-for="(item, index) in list" :key="index">  
      <!-- #ifdef H5 || APP-PLUS -->  
      <slot :name="item.id"></slot>  
      <!-- #endif -->  
      <!-- #ifdef MP -->  
      <slot name="{{item.id}}"></slot>  
      <!-- #endif -->  
      <!-- 下面这句代码注释掉就可以正常用v-slot语法 ，-->  
      <view>{{ cmtTest(item) }}</view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  props: {  
    list: {  
      type: Array,  
      default() {  
        return {};  
      }  
    }  
  },  
  data() {  
    return {  
      value: "测试"  
    };  
  },  
  computed: {  
    // 给测试加个id  
    cmtTest() {  
      return item => {  
        let val = this.value + "--" + item.id;  
        return val;  
      };  
    }  
  }  
};  
</script>  

<style></style>

操作步骤：

<template>    
  <view>    
   <test :list="navData">  
      <template v-slot:a>  
        slot---aaa  
      </template>  
      <template v-slot:b>  
        slot---bbb  
      </template>  
    </test>  
  </view>    
</template>    

<script>    
import test from '../test/test.vue'    
export default {    
  components: {    
    test    
  },    
  data () {    
    return {    
      navData: [    
       {  
          id: "a"  
        },  
        {  
          id: "b"  
        }  
      ]    
    }    
  },    
}    
</script>

更多关于uni-app 使用动态插槽时，在template中使用计算属性传参会导致插槽不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

有大佬出来解忧吗

更多关于uni-app 使用动态插槽时，在template中使用计算属性传参会导致插槽不显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用动态插槽时，在 template 中调用计算属性传参导致插槽不显示的问题，是由于 Vue 的响应式机制和 uni-app 编译机制共同作用导致的。

问题分析：

  1. 计算属性的依赖追踪：当在 template 中调用 cmtTest(item) 时，Vue 会追踪 cmtTest 计算属性对 this.value 的依赖。每次 this.value 变化都会触发重新渲染。

  2. 动态插槽的编译：在 uni-app 中，动态插槽名称（如 :name="item.id"）在编译时需要确定插槽的静态分析。当计算属性被调用时，可能影响了 Vue 对插槽内容的编译时机。

  3. 渲染顺序问题：计算属性的执行可能改变了组件的渲染流程，导致动态插槽在初始渲染时未能正确识别。

解决方案：

  1. 避免在插槽附近使用计算属性传参：将计算属性的调用移到不影响插槽渲染的位置，或改用方法调用：
<template>
  <view>
    <view v-for="(item, index) in list" :key="index">
      <slot :name="item.id"></slot>
      <!-- 改用方法 -->
      <view>{{ getTestValue(item) }}</view>
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    getTestValue(item) {
      return this.value + "--" + item.id;
    }
  }
}
</script>
回到顶部