在传统HTML页面中Vue3使用CDN方式的使用及组件的定义和引用_编程_山海自留地

山海自留地

在传统HTML页面中Vue3使用CDN方式的使用及组件的定义和引用

编程
2025-05-31 17:17

在传统HTML页面中Vue3使用CDN方式 该如何 引入并使用组件呢?


index.html

  const { createApp, ref, reactive } = Vue;

//导入
import test from "/路径/mytest.js";

//注册
app.component('testa', test);


定义子组件 mytest.js

const { createApp, ref, reactive, nextTick, onMounted, onUpdated, onBeforeUnmount, toRefs } = Vue;
export default {
    emits: ['clicked'],
    props: ['title'],
    setup(props, context) {
        const count = ref(0);
        console.log('props', props.title);
        const clickComponent = () => {
            context.emit('clicked');
        }
        return { count, clickComponent }
    },
    template: `组件 mytest`
}



子组件与父组件的参数/方法传递自行研究测试看看吧