Vue组件&&VueComponent

一、组件

1.组件的定义

实现应用中局部功能代码和资源的集合

2.vue中使用组件的三大步骤

(1).定义组件（创建组件）

(2).注册组件

(3).使用组件（写组件标签）

3.如何定义组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有区别

区别如下：

1.el不要写 因为 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

2.data必须写出函数 避免组件被复用时，数据存在应用关系

备注：使用template可以配置组件结构

4.如何注册组件

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component('组件名',组件)

5.编写组件标签

< xuexiao >< /xuexiao >

<div id="root">
        <!-- 3.编写组件标签 -->
        <xuexiao></xuexiao>
        <hello></hello>
        <hr/>
        <xuesheng></xuesheng>
        <hello></hello>
    </div>

<script>
        Vue.config.productionTip = false; //设置为 false 以阻止 vue 在启动时生成生产提示。

        // 1.创建school组件
        const school = Vue.extend({
            template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="tip">点我显示学校名称</button>
            </div>
            `,
            data() {
                return {
                    schoolName: '尚硅谷',
                    address:'北京'
                }
            },
            methods: {
                tip(){
                    alert(this.schoolName)
                }
            },
        })

        // 创建student组件
        const student = Vue.extend({
            template:`
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
            `,
            data() {
                return {
                    studentName:'张三',
                    age:18
                }
            },
        })

        // 创建hello组件 
        const hello = Vue.extend({
            template:`
            <div>
                <h2>你好啊！{{name}}</h2>
            </div>
            
            `,
            data() {
                return {
                    name:'tom'
                }
            },
        })
        // 全局注册
        Vue.component('hello',hello)
        // 创建vm
        new Vue({
            el: '#root',
            // 2.注册组件（局部注册）
            components: {
                xuexiao:school,
                xuesheng:student
            }
        })
    </script>

6.注意点

1.关于组件名：

一个单词组成：

第一种写法（首字母小写）：school

第二种写法（首字母大写）：School

多个单词组成：

第一种写法：my-school

第二种写法：MySchool

备注：

1.组件名尽可能回避HTML中已有的元素，例如 h2 H2 等

2.可以使用name配置项指定组件在开发者工具中呈现的名字

2.关于组件标签：

第一种写法：<school></school>

第二种写法：<school/>

备注：不能使用脚手架时，<school/>会导致后续组件不能渲染

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

7.关于VueComponent:

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

2.我们只需要写 < school >< /school>或< /school >，Vue解析时会帮我们创建school组件的实例对象

即Vue帮我们执行的：new VueComponent(options)

3.特别注意：每次调用Vue.extend,返回的都是一个全新的VueComponent

4.关于this指向：

(1).组件配置中：

data函数、methods函数、watch中的函数、computed中的函数 他们的this均是【VueComponent实例对象】

(2).new Vue()函数中：

data函数、methods函数、watch中的函数、computed中的函数 他们的this均是【Vue实例对象】

5.VueComponent实例对象 简称vc或组件实例对象

Vue实例对象 简称 vm

8.重要的内置关系（vue原型）

内置关系：VueComponent.prototype.proto === Vue.prototype

为什么要有这个关系：

让组件实例对象（vc）可以访问到vue原型上的属性、方法