uni-app 3.2.9版本组件引用第三层时 {{}}写法会报undefined

uni-app 3.2.9版本组件引用第三层时 {{}}写法会报undefined

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

HBuilderX类型：

正式

HBuilderX版本号：

3.2.9

手机系统：

Android

手机系统版本号：

Android 10

手机厂商：

华为

手机机型：

华为mate30

页面类型：

vue

vue版本：

vue2

打包方式：

云端

示例代码：

<template>  
  <view class="cu-form-group">  
    <view style="width: 20px; height: 20px;"></view>  
    <view class="title">77777{{title}}</view>  
    <view class="regions" @tap="showModal">  
      {{formType}}  
      {{formType !== 'query'?'请编辑':'请查看'}}  
      {{itemOption}}  
      batchResult{{batchResult}}  
    </view>  
    <text class="cuIcon-right"></text>  
  </view>  
</template>  

<script>  
import {  
  mapActions,  
  mapGetters  
} from 'vuex'  

export default {  
  model: {  
    prop: 'batchValue',  
    event: 'moduleBatchEvent'  
  },  
  props: {  
    //标题  
    title: {  
      type: String,  
      default: 'fffff'  
    },  
    //详情 query 编辑 edit  
    formType: {  
      type: String,  
      default: ''  
    },  
    //配置信息  
    itemOption: {  
      type: Object,  
      default () {  
        return {}  
      }  
    },  
    //联动ref,下拉  
    itemRef: {  
      type: String,  
      default: ''  
    },  
    //值  
    batchValue: { type: Array, default:() => ([]) }  
  },  
  computed: {  
    ...mapGetters({ cusmoduleMap: 'cusmoduleMap' })  
  },  
  watch: {  
    batchValue: {  
      handler: function (val) {  
        console.log('20210818===batchValue:', val)  
        this.batchResult = val  
      },  
      deep: true,  
      immediate: true  
    },  
    formType: {  
      handler: function (val) {  
        console.log('20210818===batchValue:', val)  
        //this.batchResult = val  
      },  
      deep: true,  
      immediate: true  
    }  
  },  
  data() {  
    return {  
      // batchResult: this.batchValue  
      batchResult: 'sssss',  
      title: '33333'  
    }  
  },  
  methods: {  
    ...mapActions([]),  
    showModal() {  
      const thiz = this  
      const params = encodeURIComponent(JSON.stringify({  
        title: this.title,  
        otherTableRelation: this.itemOption.otherTableRelation,  
        curFormType: this.itemOption.words ? 'detail' : 'edit',  
        alas: this.itemOption.alas,  
        batchRef: this.itemRef  
      }));  
      console.log('--itemOption===:', this.itemOption, thiz.batchValue)  
      uni.navigateTo({  
        url: `/components/module-form/module-batchentry/MBatchentry?params=${params}`,  
        success(res) {  
          res.eventChannel.emit('acceptDataFromOpenerPage', { data: thiz.batchValue })  
        }  
      })  
    },  
    setBatchValue(res) {  
      this.$emit('moduleBatchEvent', res)  
    }  
  }  
</script>

更多关于uni-app 3.2.9版本组件引用第三层时 {{}}写法会报undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 3.2.9版本组件引用第三层时 {{}}写法会报undefined的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的组件数据初始化时机问题。在uni-app 3.2.9版本中，当组件嵌套较深时，模板渲染可能早于props数据的完全初始化。

从你的代码可以看出几个关键问题：

  1. props与data命名冲突：你在props中定义了title，在data中也定义了title，这会覆盖props传入的值。data中的title: '33333'会覆盖props传入的title。

  2. 模板渲染时机：当组件在第三层或更深层嵌套时，模板中的{{}}插值可能在props数据还未完全准备好时就尝试渲染，导致undefined错误。

  3. watch监听问题：batchValue的watch中使用了this.batchResult = val，但batchResult在data中初始化为'sssss'字符串，而batchValue的prop类型是Array，类型不匹配可能导致问题。

解决方案：

  1. 移除data中的title定义，避免覆盖props：
data() {  
  return {  
    batchResult: []  // 改为数组类型以匹配batchValue
  }  
}
  1. 使用v-if延迟渲染，确保数据准备好再显示：
<view class="regions" @tap="showModal" v-if="formType">  
  {{formType}}  
  {{formType !== 'query'?'请编辑':'请查看'}}  
  {{itemOption}}  
  batchResult{{batchResult}}  
</view>
  1. 优化batchResult初始化：
watch: {  
  batchValue: {  
    handler: function (val) {  
      this.batchResult = val || []  // 添加默认值
    },  
    deep: true,  
    immediate: true  
  }  
}
回到顶部