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

  • Z时代
  • 2024-03-11
  • 分类：IT

vue3 cdn引入怎么使用组件？

回答：

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

回答：

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

回答：

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

以上是 `vue3` cdn引入怎么使用组件？ 的全部内容， 来源链接： utcz.com/p/934740.html

回到顶部