vue02----什么是组件、组件创建、全局组件、局部组件、组件嵌套、组件传值、为什么组件中的data不是一个对象而是一个函数

### 什么是组件？

    将代码进行复用

    组件是实例的拓展子类

    组件继承自实例，实例有的组件大部分都有，稍有变异

 

### 组件创建

    创建组件模板的2种方式：

        1、通过template标签     template:"#tpl"

        2、通过字符串模板   template:"<h1>吴启浪</h1>"

 

### 全局组件

    所有的实例都可以使用

    Vue.component("wql",{

        template:"<h1>吴启浪</h1>"

    })

 

### 局部组件

    注册到实例内部的components，只有注册实例可以使用

    let vm=new Vue({

        el:"#app",

        data:{},

        components:{

            "wql":"<h1>吴启浪</h1>"

        }

    });

 

### 组件嵌套

    全局组件嵌套，哪里都能用，没有严格的规定父子和子父

    局部组件嵌套，子组件只能在父组件中使用，严格按照实例中的父子关系渲染

 

### 组件传值

    父传子：props属性

        1、在子组件中，props用来接收自定义属性的值，这个值可以在该组件中使用

        2、这个值只能拿来用，不能改

        3、自定义属性的值为变量或表达式时，在前面加  :

        4、接收方式：数组----props:["hehe"]，对象----props:{hehe:{type:number,default:100,required:true}}

            type----限制外部数据的类型

            default----默认值，当父组件没有给子组件传值时使用默认值

            required:true----表示当前属性是必传的值（和default二选一）

 

    子传父：$emit()属性----触发本组件身上的自定义方法

        给当前子组件绑定一个自定义方法，值为接收参数的函数（这个函数不带括号），在子组件内部通过this.$emit()来调用自定义方法。

        $emit("hehe",100)

            hehe----自定义事件名

            100----参数

    

    非父子

        亲兄弟之间：子组件控制父组件的显示和隐藏

        远方亲戚：Eventbus（事件总线）

            let bus=new Vue();  创建一个空实例

            bus.$on();  在实例上注册事件

            bus.$emit();    触发实例上$on注册的事件

 

    远方亲戚

        事件总线（eventbus）：

            let bus=new Vue();  // 空实例   on----可以在实例上注册一个事件，emit----可以触发通过on注册的事件

### Q:

 

    1、为什么组件中的data不是一个对象而是一个函数

 

        如果两个实例引用同一个对象，当其中一个实例的属性发生改变时，另一个实例属性也会随之改变，只有当两个实例拥有自己的作用域时，才不会互相干扰。

        这是因为JavaScript的特性所导致，在组件中，data必须以函数的形式存在，不可以是对象。

        组件中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己的私有数据空间，他们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个就全都改了。