`vue3` cdn引入怎么使用组件？

Question

vue3 cdn引入怎么使用组件？

Answer 1

组件test.js写法

const { createApp, ref, reactive, nextTick, onMounted, onUpdated, onBeforeUnmount, toRefs } = Vue;
export default {
    emits: ['clicked'],
    props: ['title'],
    setup(props, ctx) {
        const count = ref(0);
        console.log('props', props.title);
        const clickComponent = () => {
            ctx.emit('clicked');
        }
        return { count, clickComponent }
    },
    template: '#component'
    // template: `<div>11111</div>`
}

然后在main.js中引入
import Component from './test.js'
全局注册
App = createApp({})
App.component('Component', Component);
App.mount('#App');
html页面中使用

<div class="App" id="App" v-cloak>
         <Component @clicked="clicked" title="Why Vue is so fun">
              <div>11111</div>
         </Component>
</div>    
<template id="component">
        <div @click="clickComponent">
            <slot></slot>
            <slot></slot>
        </div>
    </template>

Answer 2

看看这篇文章：cdn引入vue3.x如何使用组件

Answer 3

如果是setup函数形式

import {defineComponent} from 'vue'
const pageLabel = defineAsyncComponent(() =>
  import('@/components/pageLabel/pageLabel.vue')
)
export default defineComponent({ 
  components: {
    pageLabel,
  },
setup() {
}
})

语法糖模式

<script setup>
import pageLabel from 'xxxxxxxxxxxxxxxxxx'
引入之后可以直接使用

</script>