3.Vue2.0组件（含组件注册使用、组件生命周期函数、组件之间的数据共享）

# 了解组件

vue 中规定:组件的后缀名是 .vue。因此，组件一般是以 .vue 后缀的，比如 App.vue 文件本质上就是一个 vue 的组件。组件化开发，根据封装的思想，把页面上可重用的 UI 结构封装为组件，从而方便项目的开发和维护。

1. 组件的组成

每个 .vue 组件都由 3 部分构成。提示：安装了相关的插件之后按control+<就可以自动生成基本骨架了。

1.1 template节点

• template 是 vue 提供的容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素?
• template 中只能包含唯一的根节点

1.2 script节点

1.3 style节点

//支持less语法，scoped表示给本组件里的每个标签加上统一属性，防止样式冲突

 # 组件的注册使用

1. 私有组件的注册使用

注：一般某个组件只被调用一两次的时候，可以选择注册私有组件。

2. 全局组件的注册使用

注：当某个组件被调用的次数多时，选择注册全局组件。

注册方式：

在 vue 项目的 main.js 入口文件中，通过 Vue.component() 方法，可以注册全局组件。示例代码如下代码第3点:

// 1 导入 vue
import Vue from 'vue'
// 2 导入 App.vue 组件
import App from './App.vue'
// 3 导入需要被全局注册的那个组件
//    Count 是需要注册的组件真实名称，MyCount是自定义名称
import Count from '@/components/Count.vue'
Vue.component('MyCount', Count)

Vue.config.productionTip = false

new Vue({
  // render 函数中，渲染的是哪个 .vue 组件，那么这个组件就叫做 “根组件”
  render: h => h(App)
}).$mount('#app')

使用方式：

依然是使用标签方式使用

 # 自定义属性props节点

注意：props是只读的，不可以动态修改。需要动态修改的自定义属性，可以将它“绑定”到data数据中，因为data中数据是可读写的。

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性! 它在props节点里定义，有两种语法格式。

1. 数组格式定义的自定义属性

数组格式定义有局限性，不可设置自定义属性的 默认值 和 数据类型

export default {
    //组件的自定义属性
    props:['自定义属性A','自定义属性B','自定义属性C',...]
           }

使用：

1）如组件A（封装者）定义了自定义属性 init 

2）组件B（使用者）使用组件A，并自定义了A组件中的自定义属性 init

2. 对象格式定义的自定义属性

对象格式定义有局限性，可以设置自定义属性的 默认值 和 数据类型【其使用同上】

export default {
    //组件的自定义属性
    props{
         msg:{
            default: '我是默认内容'  //自定义属性msg的默认值
            type: String  //数据类型，有Number/Object/Array/Booleans等
            required: true  //调用时是否必须传递属性值
         }
    }
}

# 组件嵌套中样式冲突问题

//scoped表示给本组件里的每个标签加上统一属性，防止样式冲突(使样式在本组件中生效）
//但是不能够穿透样式（父组件不能给子组件设置样式）

 # 组件的生命周期&生命周期函数

生命周期(Life Cycle)：指一个组件从 【创建 -> 运行 -> 销毁】 的整个阶段，强调的是一个时间段。

生命周期函数:是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

created()生命周期函数示例： 

# 组件之间的数据共享

在项目开发中，组件之间的关系分为两大类: 父子、兄弟。

【它们之间的数据共享，一定要时刻明白是数据的共享，弄清楚数据到底在谁那里。有时候本组件展示的数据不一定属于自己的数据】

 1. 父->子 共享数据（自定义属性）

父组件向子组件共享数据使用 自定义属性 方式。步骤如下：

1.父组件传递信息：

2.子组件接收信息：

 2. 子->父 共享数据（自定义事件）

子向父组件共享数据通过 自定义事件 方式。步骤如下：

1.子组件传送信息，通过 $emit 方法发送：

2.父组件接收信息，通过 调用自定义事件 接收：

3. 兄弟组件间 共享数据（EventBus）

在 vue2.x 中，兄弟组件之间数据共享的方案是 EventBus 。实际上，任何两个组件间都可以用这个方案。步骤如下：

1 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象
2 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
3 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

1.创建中间C位角色 EventBus.js 文件，文件代码如下：

import Vue from 'vue'
export default new Vue()

2.兄弟自己A（数据发送方）：

3.兄弟自己B（数据接收方）：