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

矫情吗；* 2023-10-06 20:35 1阅读 0赞

#### \[组件\]Vue3中的局部组件 ####

*  阐述
 *  新建文件
 *  创建局部组件
 *  组测局部组件
 *  局部组件使用大驼峰命名法
 *  完整代码

## 阐述 ##

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

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

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

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

## 新建文件 ##

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

![在这里插入图片描述][05f442a8ebae43e7a82dae72f6c68426.png]

## 创建局部组件 ##

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

const counter = {
        data() {
            return {
                count: 0
            }
        },
        template: `<div>{
       {count}}<button @click="count++">增加1</button></div>`
    }

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

## 组测局部组件 ##

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

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

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

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

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

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

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

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

const youYuXi = {
        template: `<h2>willem</h2>`
    }

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

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

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

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

const YouYuXi = {
        template: `<h2>willem</h2>`
    }

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

## 完整代码 ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.2/vue.global.js"></script>
    </head>
    
    <body>
        <div id="app"></div>
    </body>
    <script>
        const Counter = {
          
            data() {
          
                return {
          
                    count: 0
                }
            },
            template: `<div>{
           {count}}<button @click="count++">增加1</button></div>`
        }
        const YouYuXi = {
          
            template: `<h2>YouYuXi contents templates</h2>`
        }
    
        const app = Vue.createApp({
          
            components:{
          
                willem: Counter,
                'you-yu-xi': YouYuXi
            },
            template: `
            <h2>willem.com</h2>
            <you-yu-xi />
            <willem />
            `
        })
        const vm = app.mount("#app")
    </script>
    </html>

![在这里插入图片描述][08a18990bc6441c191a575b650b232fd.gif_pic_center]

[05f442a8ebae43e7a82dae72f6c68426.png]: https://img-blog.csdnimg.cn/05f442a8ebae43e7a82dae72f6c68426.png
[08a18990bc6441c191a575b650b232fd.gif_pic_center]: https://img-blog.csdnimg.cn/08a18990bc6441c191a575b650b232fd.gif#pic_center