- 全局注册 字符串注册
app.component('component-name', { // 组件名不应该用驼峰式
data() {
return {
count: 0
}
},
props: ['title'],
template: `
<h4>{{ title }}</h4>
<button @click="count++">
You clicked me {{ count }} times.
</button>`
})
- 局部注册 定义组件对象 在 components 参数选项 声明对象属性的方式
const ComponentA = {
/* ... */
}
const ComponentB = {
/* ... */
}
Vue.createApp({
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
// 在模块系统中局部注册
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA // json 的简写
}
// ...
}