VUE-组件

一：组件使用的三个步骤

1、创建组件构造器对象

const cpn = Vue.extend({

template:`

<div>测试</div>

`

})

2、注册组件

Vue.component("my-cpn",cpn)

3、使用组件

<my-con></my-cpn>

全局组件:定义在Vue外面,通过Vue.component(组件名,组件构造器)使用

局部组件:定义在Vue实例内部,通过component:{

cpn:cpn

},key:value的方式使用组件

4、全局组件

全局组件：根据上诉步骤制作的组件为全局组件

局部组件：在Vue内部添加commonents:{}实例，注册局部组件，只能在当前Vue管理的容器使用

5、父子组件

父组件：在组件一的内部注册组件二，以便于能在组件一的模板里面使用组件二。在Vue实例里注册组件二，在容器里可以使用组件二的模板，但不能直接在容器里面使用组件二，因为组件二未在容器里面注册

 二、使用语法糖写法注册组件

1、去除掉Vue.extend()写法，但底层源码调用的还是Vue.extend()

全局组件写法：

局部组件写法：

2、组件模板分离写法

3、可以在组件里面使用data必须是函数，但不能是vue实例的对象形式，data要是函数的形式

原因：多次使用组件时，使用date函数(返回某个对象值)，每个组件调用函数时，使用的都是不同的对象，指向的地址值不同，使每个组件之间的调用互不影响。实现不同组件之间的数据隔离

若使用data：XXX，所有组件使用的都是同一个对象，多个组件同时操作，会造成数据有误

三、父子组件的通信

1、父->子：通过props向子组件传递数据

      子->父：通过事件向父组件发送消息

2、父子组件通信：props驼峰标识

 3、子传父：

通过绑定事件监听，在子组件发生事件时，可以自定义事件，将数据通过this.$emit()发送出去，在父组件中，绑定此事件进行处理。