解决vue中element-plus局部引用message 类型报错

在 Vue 中使用 Element Plus 的组件时，如果你遇到了关于 `message` 类型的错误，通常是由于你尝试在局部组件文件中直接导入 `Message` 组件或者其他类型的 Message 对象，而不是作为 props 或者通过 Vue 的插槽 (slot) 使用。

以下是解决这个问题的一些步骤：

1. **确认引入方式**：检查你的导入语句是否正确。通常，你应该按照下面的方式引入 Element Plus 的 Message 组件：

   import { ElMessage } from 'element-plus';

2. **作为props传递**：如果你想在子组件内部显示消息，可以将 `ElMessage` 作为 prop 接收：

   <template>
     <div>
       <el-button @click="showMessage">点击显示消息</el-button>
       <el-message :message-type="msgType" v-if="showMessage">{{ message }}</el-message>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         msgType: 'info',
         showMessage: false,
         message: '',
       };
     },
     methods: {
       showMessageHandler() {
         this.showMessage = true;
       },
     },
   };
   </script>

这样，你在点击按钮时通过 `showMessage` 控制是否显示 `ElMessage`。

3. **使用插槽（Slot）**：如果需要动态内容，可以利用 Vue 的插槽机制：

   <template>
     <div>
       <el-button @click="showMessage">点击显示消息</el-button>
       <el-message type="info" v-if="showMessage">
         <span slot="default">{{ message }}</span>
       </el-message>
     </div>
   </template>

   <script>
   export default {
     data() {
       // ...
     },
     methods: {
       showMessage() {
         this.message = '这是一个消息';
       },
     },
   };
   </script>

4. **类型提示问题**：如果是在 TypeScript 环境下，可能是类型定义的问题，确保正确地导入了类型定义文件 (`@types/element-plus`) 并更新你的组件声明。