Vue组件详解（二）

接上一篇文章【Vue组件详解（一）】，我们继续对Vue组件展开探讨，虽然说在真正的Vue开发中，我们用的都是单文件组件，但是，现在我们主要以非单文件组件展开，然后过渡到单文件组件，组件这一块，需要注意的问题还是比较多滴。

组件的命名规则

在Vue中，组件的命名是一个需要注意的点，因为在很多时候，程序运行不起来报错，问题都可能出现在组件的命名上，特别是对于初学者来说。所以说有时候该细心还是要细心一点。

单个单词命名规则：

  • 单个单词命名比较简单，要么采用纯小写方式，要么采用首字母大写方式。两者都不冲突，但是在实际开发情况下，我们命名的组件大多要求都是相对语义化一点，要给人能根据名字就大致能知道这个组件是用来干什么的，所以，更多情况下，我们组件的命名都是多单词的。

多个单词命名规则：

  • 1.使用kebab-case
    多个单词以小写并且横杠分隔的方式命名组件。例如现在我要为“顶部导航”命名一个组件，那我的命名规则就是header-nav。且使用此种方式命名一个组件时，当我们在模板中使用此组件的时候，标签名也必须一致，例如<header-nav></header-nav>。

  • 2.使用PascalCase
    多个单词以首字母大写的方式来命名组件。例如现在我要为“顶部导航”命名一个组件，那我的命名规则就是HeaderNav，使用此种方式命名一个组件时，当我们要在模板中使用此组件的时候，标签名可以有两种写法，一种是<HeaderNav></HeaderNav>,另一种则是<header-nav></header-nav>,这两种方式，模板在解析时都能识别。但是，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有kebab-case是有效的,换句话来说就是没有在脚手架环境下，只能识别到kebab-case这种方式。

在命名组件时，我们也要尽量去避免前端已有的关键字包括标签名，比如：class，object，<h2>,<h3>,<img>,<head>等等，否则程序就会报错，如下图。同时，我们也可以在创建组件的时候，使用name配置项指定组件在Vue开发者工具中呈现的名字。
在这里插入图片描述

组件的嵌套

其实在上一篇文章中我们就看到了组件的嵌套，组件的嵌套使用也是开发中的基本操作，结合树形结构不难理解，其实组件的嵌套就是组件内还包含一个或多个组件。组件间嵌套的关系我们又通常称为父子关系，上一级定义为父组件，所在层级即为子组件。

上代码：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <testa></testa>
        <hr>
    </div>
</body>
<script>
    Vue.config.productionTip = false    //阻止Vue在启动生成生产提示
    // 创建testb组件
    const testb = Vue.extend({
        template:`
        <div>
            <h2>出生地点：{{native}}</h2>
            <h2>悬赏金：{{amount}}</h2>    
        </div>
        `,
        data(){
            return{
                native:'东海·风车村',
                amount:'15亿贝利'
            }
        }
    });

    // 创建testa组件（父组件）
    const testa = Vue.extend({
        template:`
        <div>
            <h2>人物姓名：{{name}}</h2>
            <h2>人物年龄：{{age}}</h2>
            <testb></testb>
        </div>
        `,
        data(){
            return{
                name:'蒙奇·D·路飞',
                age:19
            }
        },
        // 局部注册
        components:{
            testb:testb
        }
    });

    new Vue({
        el:'#app',
        // 局部注册
        components:{
            testa:testa,
        },
        data:{
            msg:'海贼王生命资料卡'
        }
    })
</script>
</html>

接下来，我们一步一步分析怎么实现组件的嵌套，看图：

在这里插入图片描述

如上图，我把组件的嵌套详细分为了三部分，咱们一部分一部分的解读怎么实现的

首先在组件嵌套之前的必备工作肯定得准备两个及两个以上的组件，不然怎么完成组件嵌套，上图中，我分别创建了testA和TestB组件，在第一步中我把TestB组件规划作为TestA的子组件。

其次，到了第二步，因为要把TestB组件作为TestA组件的子组件，那组件的注册不得在TestA组件身上？难道会在vm身上，假若TestB组件的注册放在了vm身上，那岂不TestA，TestB父子没做成，变成兄弟了。所以说在组件的嵌套中，子组件的注册是在父组件中完成的。

最后一步也是决定组件能否成功展示的一步，既然我们把组件的注册放在了父组件身上，那组件的使用也肯定是在父组件中，也就是说，要把标签对写在父组件的template属性中，而不是写在vm的模版中，因为本身TestB组件并没有在vm中注册，所以即便在vm中写了TestB标签对，控制台给出的回应会是找不到此标签。
在这里插入图片描述
此时就可以看出，TestA组件和TestB组件不再是同级关系，而是TestB组件隶属于TestA组件了，也就是父子关系。

VueComponent解读

我们在创建组件时，可能没有想过，组件真正意义上是如何创造出来的，我们只是调用了对应的配置对象，在配置对象中添加了必要的属性之后，Vue就自动帮我们生成了一个组件，所以，组件到底是什么？
在这里插入图片描述

其实组件的本质就是一个名为VueComponent的构造函数，且这个构造函数，并不是我们去调用的，而是当我们调用Vue.extend()时，Vue.extend()生成的。 那也就是说，我们创建一个组件的时候，其实就是创建了一个Vue.extend()之下VueComponent()的实例对象。并且，我们一旦要创建组件，必须要使用Vue.exten()，而每一次使用Vue.extend()，它都会返回一个全新的VueComponent,也就是说，每一次调用，都会返回一个新的实例对象。

在这里插入图片描述

并且组件中的this指向和Vue实例中this指向是不同的，组件中的this指向的是组件实例对象，也就是VC，而Vue实例中的this指向的是Vue实例对象，也就是VM。
在这里插入图片描述
当我分别点击不同的按钮后，控制台输出的也是不一样的this。

总结

综上就是我对Vue组件的第二次总结，主要介绍了组件的命名规则，组件的嵌套以及对VueComponent的解读，学习Vue组件不能太过于急切，得慢慢的一步一步了解，在组件学习完成之后的Vue知识点中，很多东西都是基于Vue组件上展开的，组件作为Vue中比较重要的一块，我也在认真总结Vue组件中自己遗漏的知识点，本篇重点在VueComponent，不说熟练知晓组件是怎么生成的但大致得说得上来组件是如何产生的吧。

持续更新中~~~~

觉得不错的话记得点赞收藏加关注哟！！

我也在不断努力！！
在这里插入图片描述

# javascript # 前端 # vue.js # html # 前端框架
Logo
Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue