在 uni-app 中，如果你遇到两个组件显示长度错误的问题，通常这可能是由于数据传递、组件状态管理或视图渲染的问题。下面我将给出一个简单的示例，展示如何在 uni-app 中使用两个组件，并确保它们正确显示数据的长度。

示例结构

假设我们有两个组件：ComponentA 和 ComponentB。ComponentA 将一个字符串传递给 ComponentB，ComponentB 显示该字符串及其长度。

1. 创建主页面 index.vue

<template>
  <view>
    <component-a @input-data="handleInputData" />
    <component-b :text-data="textData" />
  </view>
</template>

<script>
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      textData: ''
    };
  },
  methods: {
    handleInputData(text) {
      this.textData = text;
    }
  }
};
</script>

2. 创建 ComponentA.vue

<template>
  <view>
    <input type="text" v-model="inputText" @input="emitInputData" />
  </view>
</template>

<scriptmethods>:
 {export
 default     {emit
InputData  ()data {()
 {      
this    .$returnemit {('
input      -inputdataText',: this ''.
input    Text};);
  
},
      }
  }
};
</script>

3. 创建 ComponentB.vue

<template>
  <view>
    <text>Text: {{ textData }}</text>
    <text>Length: {{ textData.length }}</text>
  </view>
</template>

<script>
export default {
  props: {
    textData: {
      type: String,
      default: ''
    }
  }
};
</script>

解释

1. 主页面 (index.vue)：

   • 引入并注册 ComponentA 和 ComponentB。
   • 使用 @input-data 事件监听 ComponentA 的输入数据，并将其存储在 textData 中。
   • 将 textData 传递给 ComponentB。

2. ComponentA.vue：

   • 包含一个输入框，使用 v-model 绑定 inputText。
   • 在输入框的 @input 事件中，通过 $emit 触发 input-data 事件，传递 inputText。

3. ComponentB.vue：

   • 接收 textData 作为 prop。
   • 显示 textData 及其长度。

通过这种方式，ComponentA 和 ComponentB 可以正确地传递和显示数据，确保显示长度不会出错。