:maxTextWidth=“maxTextWidth“下滑红线报错，attribute ‘:maxTextWidth‘ must be hyphenated , maxTextWidth:numbe

问：

报错了:  :maxTextWidth="maxTextWidth"下滑红线报错，attribute ':maxTextWidth' must be hyphenated , maxTextWidth:number

回答：

在Vue 3中，`props`的命名规则要求属性名必须是小写并用连字符分隔（kebab-case）。因此，你需要将`maxTextWidth`转换为`max-text-width`。

以下是修正后的代码：

### 父组件

```html
<template>
  <div id="app">
    <ChildComponent :data="data" :max-text-width="maxTextWidth" />
  </div>
</template>

<script>
import { ref, onMounted, provide } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const data = ref([
      { text: '人力', percentage: '90', percentageWidthNum: '100%' },
      { text: '物品', percentage: '20', percentageWidthNum: '22%' },
      { text: '物理学', percentage: '50', percentageWidthNum: '56%' },
      { text: '服务业', percentage: '40', percentageWidthNum: '44%' },
      { text: '操作系...', percentage: '80', percentageWidthNum: '89%' },
    ]);

    const maxTextWidth = ref(0);

    const calculateMaxTextWidth = () => {
      let maxWidth = 0;
      data.value.forEach(item => {
        let tempDiv = document.createElement('div');
        tempDiv.style.position = 'absolute';
        tempDiv.style.visibility = 'hidden';
        tempDiv.style.whiteSpace = 'nowrap';
        tempDiv.innerHTML = item.text;
        document.body.appendChild(tempDiv);
        let width = tempDiv.offsetWidth;
        document.body.removeChild(tempDiv);
        if (width > maxWidth) {
          maxWidth = width;
        }
      });
      maxTextWidth.value = maxWidth;
    };

    onMounted(() => {
      calculateMaxTextWidth();
    });

    provide('maxTextWidth', maxTextWidth);

    return {
      data,
      maxTextWidth
    };
  }
};
</script>
```

### 子组件 (ChildComponent.vue)

```html
<template>
  <div class="item" v-for="(item, index) in data" :key="index">
    <div class="order-num">{{ index + 1 }}</div>
    <div class="text" :style="{ width: maxTextWidth + 'px' }">{{ item.text }}</div>
  </div>
</template>

<script>
import { inject } from 'vue';

export default {
  props: {
    data: Array,
    maxTextWidth: Number
  },
  setup(props) {
    return {
      maxTextWidth: props.maxTextWidth
    };
  }
};
</script>

<style>
.item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.order-num {
  margin-right: 10px;
}
.text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
```

### 解释

1. **父组件**：
   - 在模板中，将`maxTextWidth`属性改为`max-text-width`。
   - 在`setup`函数中，提供`maxTextWidth`并返回`data`和`maxTextWidth`。

2. **子组件**：
   - 在`props`中定义`maxTextWidth`。
   - 在`setup`函数中，从`props`中接收`maxTextWidth`并返回。

这样，你就可以在父组件中编写逻辑，并将结果传递给子组件进行渲染，同时避免了命名规则导致的错误。