net mvc中使用vue自定义组件遇到的坑

自定义一个ButtonCounter.js组件

javascript 复制代码

export default {
    data() {
        return {
            count: 0
        }
    },
    template: `
    <van-button type="primary" @click="count++">
      You clicked me {{ count }} times.
    </van-button>`
}

按照官网文档的意思，组件命名需要大写驼峰命名。或者使用kebaba-case方式。但是MVC只支持kebaba-case

如果我们使用PascalCase方式命名来导入自定义组件

csharp 复制代码

<script type="module">

    import reclick from '../../js/reclick.js';
    import ButtonCounter from "../../js/components/ButtonCounter.js";
    const app = Vue.createApp({
        // components: {
        //     buttoncounter
        // },
        data() {
            return {
                count: 0
            }
        },
        methods: {
            increment() {
                this.count++
            }
        },
        template: '#app-template'
    })
    app.use(ElementPlus)
    app.use(vant)
    app.use(vant.Lazyload)

    //自定义组件
    app.component('ButtonCounter', ButtonCounter)

    // 调用工具函数，弹出一个 Toast
    // vant.showToast('提示');
    // app.directive('focus', {
    //     mounted: (el, binding, vnode, prevNode) => {
    //         el.addEventListener('click', e => {
    //             if (!el.disabled) {
    //                 el.disabled = true;
    //                 el.style.cursor = 'not-allowed';
    //                 el.classList.add('is-disabled');
    //                 setTimeout(() => {
    //                     el.disabled = false;
    //                     el.style.cursor = 'pointer';
    //                     el.classList.remove('is-disabled');
    //                 }, binding.value || 1000);
    //             }
    //         });
    //     }
    // }); //自定义指令

    app.directive('reclick', reclick
    ); //自定义指令
    app.mount('#app')
</script>

html 复制代码

<template id="app-template">
 
    <el-button v-reclick="20000" type="primary" @@click="increment">按钮</el-button>
    <h1>Count:{{count}}</h1>



    <ButtonCounter />
</template>

这样的方式引入组件并在页面中使用，什么都不会显示，并且F12会有警告

提示组件失败，并且组件名称默认是小写。既然默认是小写那我们使用kebaba-case命名方式试试。

javascript 复制代码

export default {
    name: 'vant-my-button',
    data() {
        return {
            count: 0
        }
    },
    template: `
    <van-button type="primary" @click="count++">
      You clicked me {{ count }} times.
    </van-button>`
}

组件里面给组件name赋值。

然后使用组件

javascript 复制代码

    import ButtonCounter from "../../js/components/ButtonCounter.js";
    //自定义组件
    app.component('vant-my-button', ButtonCounter )

html 复制代码

<template id="app-template">
 
    <el-button v-reclick="20000" type="primary" @@click="increment">按钮</el-button>
    <h1>Count:{{count}}</h1>


    <vant-my-button></vant-my-button>
    <vant-my-button></vant-my-button>
    <vant-my-button></vant-my-button>
</template>

运行后，组件完美加载出来。

注意，vue如果挂载了template ，那么组件请写在template 中，如果写在外面也出不来。