25 创建局部组件、组测局部组件、组件命名法

阐述

和全局组件相对应的就是局部组件，你可以把局部组件看成一个变量，然后在使用的地方注册这个组件，才可以使用。

局部组件的最大好处就是只有在使用的时候，才会耗费系统资源，

不像全局组件一样，一直都存在。

你现在看这段话可能不是很好的理解，下面通过代码，来讲解一下什么是局部组件。

新建文件

DOCTYPE html>


    
    
    Document
    



    


    const app = Vue.createApp({
        template: `willem.com`
    })
    const vm = app.mount("#app")

这时候可以打开浏览器看一下是否可以显示出正常内容。如果可以正常显示，说明一切正常。接下来就可以编写一个局部组件了。

创建局部组件

注册局部组件，其实你可以理解成就是声明一个变量，这个变量是一个对象，所以最外层我们使用大括号 {}（花括号），然后里边和使用 Vue.CreateApp( ) 时传递的参数是一样的。

const counter = {
    data() {
        return {
            count: 0
        }
    },
    template: `{{count}}增加1`
}

注册完组件后，我们还不能直接使用，如果直接使用会报错。这时候要作的是在vue.CreateApp()方法里进行注册。

组测局部组件

注册局部组件的方法很简单，直接用 components 属性来声明就可以了。

const app = Vue.createApp({
    components: { counter },
    template: `
        JSPang.com
        
    `
})

但是这只是简写方法，正确的写法应该是 components: { counter:counter },，其实就是给组件起个名字，你甚至可以叫做 willem。

const app = Vue.createApp({
        components: { willem: counter },
        template: `
        willem.com
        

注册好后，你就可以直接在模板中使用了。 需要注意的是，局部变量也是拥有独立性的，所以可以进行复用。

局部组件的编写有一些不成文的潜规则，下面介绍一下。

局部组件使用大驼峰命名法

有时候我们的组件名字会比较长，比如写一个 youYuXi 组件。

const youYuXi = {
    template: `willem`
}

现在变量的名字有大小写，这时候在组测组件时，要使用这种形式（用 - 切割单词）。

const app = Vue.createApp({
    components: { 
        willem: counter, 
        'you-yu-xi': youYuXi 
    },
    template: `
    willem .com
    
    
`

产生这种问题是因为一个矛盾点，就是变量中不能使用 -，而组件调用确实可以的。

所以为了区分组件，在定义局部组件的时候，潜规则是首字母进行大写，然后使用驼峰命名法。

const YouYuXi = {
    template: `willem`
}

这里给出本节的全部代码，帮助你更好的学习。

完整代码

DOCTYPE html>


    
    
    Document
    



    


    const Counter = {
        data() {
            return {
                count: 0
            }
        },
        template: `
{{count}}增加1
`
    }
    const YouYuXi = {
        template: `YouYuXi contents templates`
    }

    const app = Vue.createApp({
        components:{
            willem: Counter,
            'you-yu-xi': YouYuXi
        },
        template: `
        willem.com
        
        
        `
    })
    const vm = app.mount("#app")