<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://unpkg.com/vue@next"></script>
<title>Document</title>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
template:`
<div>
<hello-world />
<async-common-item />
</div>
`,
})
// 1. 同步组件
app.component('HelloWorld', {
template:` <div> Hello world </div> `,
})
// 2. 异步组件 (把大型页面拆分成一个个小组件按需加载)
app.component('async-common-item', Vue.defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({
template: '<h3>你好 vue3! </h3>'
}) // 返回的是一个option
}, 2000);
})
}))
app.mount('#root');
</script>
</body>
</html>
vue3基础入门-同步、异步组件使用
最新推荐文章于 2024-05-24 11:45:49 发布