Vue2版本注册组件，使用的是Vue.component方法，切换到Vue3后，发现这个方法消失了，然后上网寻找组件注册的方法，但是没有找到，所以自己研究源码，发现了注册组件的方法，和大家分享一下
1.全局注册组件，在调用Vue.createApp方法创建Vue实例时，会返回一个实例对象，对象中包含component方法用于全局注册组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3</title>
</head>
<body>
<div id="app">
<button @click="increment">点击按钮</button>
<div>{{state.message}}</div>
<Test :message="state.message"></Test>
</div>
<template id="test">
<h1>{{message}}</h1>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.0-beta.18/vue.global.js"></script>
<script>
var App = {
setup(props, root) {
var state = Vue.reactive({
message: 10
})
function increment() {
state.message++
}
Vue.onMounted(() => {
console.log('Mounted')
})
return {
state,
increment
}
}
}
// createApp方法返回Vue实例
var vm = Vue.createApp(App)
// 返回的实例有component方法，用于全局注册组件
vm.component('Test', {
template: '#test',
props: ['message'],
setup(props, root) {
console.log(root)
}
})
vm.mount("#app");
</script>
</body>
</html>
2.局部注册组件，在创建Vue实例时，有一个components选项，这里可以注册局部组件
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue3</title>
</head>
<body>
<div id="app">
<button @click="increment">点击按钮</button>
<div>{{state.message}}</div>
<Test :message="state.message"></Test>
</div>
<template id="test">
<h1>{{message}}</h1>
</template>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.0-beta.18/vue.global.js"></script>
<script>
var App = {
components: {
Test: {
template: '#test',
props: ['message'],
setup(props, root) {
console.log(root)
}
}
},
setup(props, root) {
var state = Vue.reactive({
message: 10
})
function increment() {
state.message++
}
Vue.onMounted(() => {
console.log('Mounted')
})
return {
state,
increment
}
}
}
// createApp方法返回Vue实例
var vm = Vue.createApp(App)
vm.mount("#app");
</script>
</body>
</html>
如果使用Vue-cli体验Vue3的话，不需要手动注册组件，会自动注册。如果想手动注册组件，不想使用笨重的脚手架的话，就用上面的方法吧...
