Vue组件

一、组件的介绍

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

组件的优点：文件好维护，依赖关系不混乱，复用率高

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

组件化：当应用中的功能都是多组件的方式来编写，你这个应用就是组件化的应用

非单文件组件：一个组件中包含n个组件

单文件组件：一个文件中包含1个组件
 

二、使用组件的三大步骤

        （1）定义组件（创建组件）

        （2）注册组件

        （3）使用组件

2.1 定义组件（创建组件）

1.使用Vue的extend方法创建组件
2.组件中不能有el配置项
3.data必须以函数式来写
        如果使用对象式的话，两个地方都用到data的时候一个地方改变data另一个地方的data也会跟着改变（相当于指针指向同一个内存区域）
        使用函数式每个地方返回的都是一个新的data对象（每次使用都创建新的内存区域）
4.template存放HTML结构

//第一步：创建组件
        //school组件
        const school=Vue.extend({
            //这里template中的元素必须要有个容器包裹，这里一般用div
            template:`
            

            
学校名称：{{schoolName}}
            
学校地址：{{address}}
            显示学校名
            
            `,
            data(){
                return{
                    schoolName:'school',
                    address:'beijing'
                }
            },
            //配置方法
            methods: {
                showName(){
                    alert(this.schoolName)
                }
            },
        })

2.2 注册组件 

• 在Vue实例中通过components配置项注册（局部注册）
• Vue.component(‘组件名’,组件变量) （全局注册）

//全局注册组件  (此处的全局注册和第二步注册组件二选一)
      //  Vue.component('school',school)

        let vm=new Vue({
            el:'#root',
            data:{
               
            },
            //第二步：注册组件（局部注册）
            components:{
                school:school,
                //因为名字相同，所以可以缩写
                student
            }
        })

2.3 使用组件

直接在HTML页面中引入标签 

eg: 

完整代码如下所示： 

 详细过程可见：【Vue组件详解（一）】_小田是个程序员的博客-CSDN博客

三、注意点