Vue组件（注册，使用，自定义属性，样式，生命周期，父子传值）

组件的使用

需要使用一个组件的时候，需要进行一下几个步骤：

1. 使用import导入相应需要使用的组件 import Xxx from '@/components/Xxx.vue'
2. 使用components节点注册组件

export default {
  components: {
    Xxx
  }
}

3. 用标签的形式使用刚才的组件
   

组件的注册

私有组件

使用components标签进行注册的组件是私有组件，除了自己意外，其他组件不能使用这个被注册的组件

// 导入需要被使用的组件
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // 将组件进行注册
    HelloWorld
  }
}

全局组件

在vue项目中main.js文件中，通过Vue.component()方法，将组件注册为全局组件

// 导入需要被全局注册的组件
import Count from '@/components/count.vue'
// 对组件进行全局注册
Vue.component('Count', Count)

组件的props（自定义属性）

props是组件的自定义属性，使用此属性，可以让组件在使用时候，拥有不同的初始值，提高组件的复用性

需要注意的是： 我们使用init="9" 则init的值为一个字符串‘9’，如果我们需要传过来的值为数，则需要使用:init="9"，使用Vue中的属性绑定，使用Vue进行绑定，那么双引号中的内容相当于JS内容，所以会被认定为数字9

在日常的使用中，我们需要注意，props中的值是只读的，我们不能对其进行修改，如果我们需要对其进行修改，则可以将其值赋值到data中，然后再进行修改。如果没有对init属性进行传值，那么init默认值为undifined

组件props属性的默认值

在声明自定义属性时候，可以使用default属性设置默认值。如果没有对自定义属性进行传值，那么init默认值为undifined

明确规定传入值的类型，值类型有：Number, Boolean, String, Array, Object等

组件props属性的必填项

规定了组件的必填选项之后，就算对属性设置了默认值，要是在调用的时候没有传入默认值，也会报错。

组件之间的样式冲突避免（样式隔离）

在默认情况下，写在.vue组件中的样式会全局生效，因此容易导致多个组件之间造成样式冲突
导致冲突的根本原因：

1. 单页面应用中，所有的组件结构都是基于唯一的index.html进行渲染的
2. 每个组件中的样式，都会影响整个index.html页面的DOM元素

在style标签之后加上一个限定范围的属性，则这个style样式集则不会被全局使用

在父组件中修改子组件的样式（样式穿透）

在需要修改的属性前面添加/deep/属性，则可以达到修改子组件样式的效果。
主要用途是在当我们使用第三方库的时候，我们需要修改库提供的默认样式，则需要用到这个修改属性
当我们使用/deep/做修饰的时候，会被处理为[data-v-xxx] h5，这里权值为什么高于子组件自带样式还没明白

样式隔离和样式穿透的实现原理

在我们添加scoped进行样式隔离的时候，我们的Vue处理程序会对当前组件的所有标签添加一个属性data-v-xxxx，而在此组件的所有样式选择器之后，也会添加相应的[data-v-xxxx]，通过这样的方法实现精准选择。而不是此组件中的标签和样式，都不会被添加这个精准选择的属性。

需要注意的是，父组件中使用了scoped属性之后，会为组件自身的所有标签添加data-v-xxx，并且也会对子组件的根节点也添加相应的data-v-xxx属性，用于实现样式穿透。

Vue组件的生命周期

当我们使用在一个html文件中，我们使用标签进行调用组件的时候，这个时候会创建一个Vue组件的实例。这个时候组件的生命周期就开始了。

生命周期：生命周期指的是一个程序存在的时间段，代表的具体的一段时间。组件的生命周期指的是从创建-》运行-》销毁的整个阶段。

其生命周期包含，beforeCreate->created->beforeMount->mounted->beforeUpdate->updaed->beforeDestroy->destroyed

生命周期的具体过程：

• 在beforeCreate生命函数中，我们通常做不了什么工作，因为这个时候组件的内容主要部分都还没有创建好
• 在created生命函数中，我们通常调用组件自身的方法发起网络请求，因为这个时候，组件除了页面结构，其他的内容都已经创建好了。也是因此，在这个时候我们不能操作DOM元素，因为其没有开始创建。
• 在beforeMount生命函数中，通常我们也不做什么操作
• 在mouted生命函数中，此时组件所有内容都已经创建好了。

生命周期函数直接参考Vue官网吧，这里不再赘述了。Vue官网生命周期函数

Vue组件之间的数据共享

父组件向子组件传递数据

父向子传递数据可以使用组件的自定义属性props进行实现

1. 将父组件的值放到子组件的自定义属性props中

2. 子组件使用props进行接收

子组件向父组件传递数据

这种情况需要使用自定义事件进行实现

1. 在子组件中发布一个广播事件，广播名称这里设置为emitEvent，并且传递一个参数，参数为this.count，参数可以传递多个，使用数组进行传递
   
2. 在父组件中接收名称为emitEvent的广播，并且接收到广播之后调用一个名为getEmitVal的方法
   
3. 被广播触发的方法接收一个参数（也就是发布广播时候传递的一个参数），并且使用这个参数
   

兄弟组件之间的数据共享

在Vue 2.x中，兄弟组件之间的数据共享通过EventBus进行实现

具体步骤如下：

1. 创建一个eventBus.js的文件，在文件中向外共享一个Vue实例对象
   

2. 在兄弟组件A准备好需要传递的数据，然后导入eventBus.js文件，并且使用导入的bus.$emit方法向外广播，这里广播名称命名为share，并且在广播中携带一个参数，这个参数即是需要传输的数据
   

3. 在兄弟组件B中也导入eventBus.js，然后使用bus.$on方法接收一个广播，这个广播命名为share,，然后接收一个参数，这个参数即是兄弟组件A传送过来的参数