vue中，全局子组件命名使用驼峰命名，是不是不被支持？但是又能大写首字母？

来源：1-2 组件的定义及复用性，局部组件和全局组件（2）

im镇辉

2021-11-07 16:15:19

相关代码：

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lesson</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root">
        <div>
            <hello></hello>
        </div>
        <div>
            <hello></hello>
        </div>
        <div>
            <World></World>
        </div>
        <div>
            <hello-parent></hello-parent>
        </div>
        <div><counter></counter></div>    
    </div>
    <script>
        // 组件的定义
        // 组件具备复用性，组件的数据为组件独享，相同组件之间的运算互不影响.(个人理解：
        // 同样是人，相貌都相同，但是行为不同，遇事不同)
        // 全局组件，只要定义了，处处可以使用，性能不高，但是使用起来简单，名字建议，小写字母单词，中间用-隔开
        // 局部组件，定义了，要在实例用components，声明（注册）之后才能使用，性能比较高，使用起来有些麻烦，建议大写字母开头，驼峰命名。
        // 局部组件使用时，要做一个名字和组件间的映射对象，你不写映射， Vue底层也会自动尝试帮你映射

        // 局部组件counter ：需要放在实例的上面
        const counter = {
            data() {
                return {
                    count: 1
                }
            },
            template: `<div @click="count+=1">{{count}}</div>`
        }
       
        // 创建vue的实例
        const app = Vue.createApp({   // 创建vue的实例
            //双引号这个是标签上要用的，没有双引号这个是定位局部组件用的
            // components: { "counter": counter }    
            // 如果components里面的key 和value值相同，根据es6的语法 可以简写如下
            components: { counter }    

        });


        // 注意：子组件命名的时候，因为标签名字中间不能用大写，所以组件命名时中间也不能用大写，
        // 但是首字母可以大写（但是用于局部变量比较规范），所以可以用-隔开
        // 子组件hello（全局组件）
        app.component('hello', {
            template: `hello`
        })
        // 子组件world（全局组件）
        app.component('World', {
            template: `world`
        })



        // hello-parent（全局组件） 子组件中应用其他的子组件
        app.component("hello-parent", {
            template: `<hello></hello>`
        })


        const vm = app.mount('#root')

        // const app = Vue.createApp({

        // });
        // const vm = app.mount('#root')


    </script>
</body>


</html>

写回答

1回答