Vue学习：Vue中的组件的介绍

组件的定义：实现应用中局部功能代码和资源的集合；

模块的定义：向外提供特定功能的js程序，一般就是一个js文件；

模块化：当应用中的js都以模块的方式来编写，那这个应用就是一个模块化的应用；

组件化：当应用中的功能都是以组件的方式来编写的，那这个应用就是一个组件化的应用。

在创建组件之前，首先来了解一个非单文件组件和单文件组件的区别：

非单文件组件是指一个文件中包含多个组件，单文件组件是指一个文件中只包含一个组件。

一、非单文件组件举例：

 <div id="root">
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <student></student>
        
    </div>
    <script>
        //第一步：创建school组件
        const school=Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
            `,
            // el:"#root",  组件定义时一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于谁
            data(){  //这里的data要写成函数形式，因为如果写成对象形式，会造成数据共享，也就是当多次使用该组件时，
                     // 改变其中一个组件的值会影响全部的组件
                return{
                    schoolName:'河南科技大学',
                    address:"洛阳市"
                }
            },
        })
        //第一步：创建student组件
        const student=Vue.extend({
            template:`
            <div>
                <h2>学生名字：{{studentName}}</h2>
                <h2>年龄：{{age}}</h2>
            </div>
            `,
            data(){  
                return{
                    studentName:'张三',
                    age:18
                }
            },
        })

        const vm=new Vue({
            el:"#root",
            // 第二步：注册组件
            components:{
                school,
                student
            }
        })
    </script>

关于组件的一些注意点：

关于组件名：

一个单词组成：第一种写法（首字母小写）；第二种写法（首字母大写）

多个单词组成：第一种写法（形如：my-school）；第二种写法（形如：MySchool）

组件嵌套：

   <div id="root">
        <school></school>
    </div>
    <script>
         const student=Vue.extend({
            template:`
            <div>
                <h2>学生名字：{{studentName}}</h2>
                <h2>年龄：{{age}}</h2>
            </div>
            `,
            data(){  
                return{
                    studentName:'张三',
                    age:18
                }
            },
        })
        const school=Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
            `,
           
            data(){  
                return{
                    schoolName:'河南科技大学',
                    address:"洛阳市"
                }
            },
            components:{student}
        })
       
    
        const vm=new Vue({
            el:"#root",
            components:{
                school
            }
        })
    </script>

关于VueComponent：

1、自定义组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是由Vue.extend生成的。

2、我们本身只需要写组件标签，Vue解析时会帮我们创建组件的实例对象，即Vue帮我们执行的：new VueComponent（options）。

3、特别注意，每次调用Vue.extend时，返回的都是一个全新的VueComponent。

4、关于this的指向：

（1）：组件配置中，data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是VueComponent实例对象；

（2）：new Vue（options）配置中： 

data函数、methods中的函数、watch中的函数、computed中的函数，它们的this均是Vue实例对象。

一个重要的内置关系：VueComponent.prototype.__proto__===Vue.prototype,有这个关系的目的是：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

二、单文件组件举例：

在单文件组件中需要用到脚手架，所以首先需要初始化脚手架；

具体步骤：

1、全局安装@vue/cli:npm install -g @vue/cli

2、切换到要创建项目的目录，然后使用命令创建项目：vue create xxx

3、启动项目: npm run serve

然后在编写文件：

main.js是整个项目的入口文件；

components中的vue文件：

<template>
  <div>
    <h2>学校名称：{{schoolName}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
    name:'School',
    data(){  
        return{
            schoolName:'河南科技大学',
            address:"洛阳市"
        }
    }
}
</script>

<style>

</style>