vue.js - `vue3` cdn引入怎么使用组件？

Question

vue3 cdn引入怎么使用组件？

Answer 1

如果是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>

Answer 2

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

Answer 3

组件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>