elementui 自定义组件

ElementUI 提供了丰富的组件，但是在某些情况下，我们可能需要自定义组件来满足特定的需求。下面是一个简单的自定义组件示例：

<template>
  <div class="my-component">
    <span>{{ message }}</span>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, World!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'New Message!'
    }
  }
}
</script>

<style scoped>
.my-component {
  padding: 10px;
  background-color: #f2f2f2;
}
</style>

在这个示例中，我们创建了一个名为 `MyComponent` 的组件，它包含一个消息和一个按钮，点击按钮后可以更新消息。为了创建自定义组件，我们需要做以下几件事情：

1. 在 `template` 中定义组件的 HTML 结构。
2. 在 `script` 中定义组件的行为和属性。
3. 在 `style` 中定义组件的样式。

使用自定义组件时，我们可以像使用 ElementUI 组件一样使用它，例如：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  name: 'App',
  components: {
    MyComponent
  }
}
</script>

在这个示例中，我们将自定义组件 `MyComponent` 导入到 App 组件中，并将其注册为局部组件。现在我们可以在 `template` 中使用 `<my-component></my-component>` 来显示自定义组件了。