vue2在页面中引入自定义组件

在Vue 2中引入自定义组件非常简单，首先你需要创建一个.vue文件，定义你的组件结构、属性和生命周期等。下面是一个基本步骤：

1. **创建组件**：
- 在项目目录下，通常在`src/components`文件夹下创建一个新的文件，比如`MyComponent.vue`。
- 在这个文件里，你可以编写HTML模板、数据绑定（data）、事件处理（methods）、计算属性（computed）以及可能的组件选项（如props、components、v-model等）。

<template>
  <div>
    我是一个自定义组件{{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello from Custom Component'
    }
  }
}
</script>

2. **在其他组件或main.js中使用组件**：
- 在需要使用的地方通过标签引用它，比如在另一个组件的`<template>`部分。
- 如果你想传入一些数据给组件，可以在标签上使用`v-bind`（简写版为`:`) 或 `prop`属性。

<template>
  <div>
    <!-- 使用自定义组件 -->
    <my-component :message="customMessage"></my-component>
  </div>
</template>

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

export default {
  components: {
    MyComponent
  },
  data() {
    return {
      customMessage: '这是传递给组件的消息'
    }
  }
}
</script>