Vue自定义组件并注册

在Vue.js中创建并注册自定义组件通常包括以下步骤：

全局注册组件
全局注册的组件可以在任何使用了Vue实例的地方被引用。

1. 创建组件：
   假设我们有一个名为MyComponent.vue的单文件组件，内容如下：

// MyComponent.vue
<template>
  <div class="my-component">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  name: 'MyComponent', // 可选，用于调试和区分组件
  props: {
    title: String,
    message: String
  },
  data() {
    return {
      // 组件内部数据（如果有）
    }
  },
  methods: {
    // 组件内部方法（如果有）
  }
}
</script>

<style scoped>
/* 组件样式 */
.my-component {
  background-color: #f0f0f0;
}
</style>

2. 注册组件：
   在main.js 或者你项目的入口文件中修改：

import Vue from 'vue';
import MyComponent from './components/MyComponent.vue'; // 导入你的组件

// 全局注册组件
Vue.component('MyComponent', MyComponent);

new Vue({
  el: '#app',
  // ...
});

现在my-component标签可以在任何子组件或应用根组件的模板中使用了。

局部注册组件
局部注册的组件只在其所在的父组件作用域内可用。

1. 创建组件不变，同上。

2. 局部注册组件：
   在某个单文件组件或Vue实例中注册

import MyComponent from './components/MyComponent.vue';

export default {
  components: {
    MyComponent // 使用简写方式注册
    // 或者
    'my-local-name': MyComponent // 如果你想给组件一个不同的本地名称
  },
  template: `
    <div>
      <!-- 现在可以在这个组件内部使用<my-component> -->
      <my-component :title="pageTitle" :message="pageMessage"></my-component>
    </div>
  `,
  data() {
    return {
      pageTitle: '页面标题',
      pageMessage: '页面信息'
    }
  }
}

这样，在这个特定的组件中就可以使用已局部注册的 my-component 了。