Vue3 组件注册 全局注册和局部注册

1. 全局注册 字符串注册

app.component('component-name', { // 组件名不应该用驼峰式
  data() {
    return {
      count: 0
    }
  },
  props: ['title'],
  template: `
  	<h4>{{ title }}</h4>
    <button @click="count++">
      You clicked me {{ count }} times.
    </button>`
})

2. 局部注册 定义组件对象 在 components 参数选项 声明对象属性的方式

const ComponentA = {
  /* ... */
}
const ComponentB = {
  /* ... */
}
Vue.createApp({
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

// 在模块系统中局部注册
import ComponentA from './ComponentA.vue'

export default {
  components: {
    ComponentA // json 的简写
  }
  // ...
}