vue组件的详细介绍、用法

vue组件的详细介绍、用法

最近看了不少网页和资料，发现vue组件应用非常重要，在这里和大家分享一下我的一些了解

简单了解组件及目标

组件其实也是一个Vue的实例 ---- 组件是可复用的 Vue 实例

组件
1、注册一个组件
2、使用组件 ---- 就像HTML标签一样使用即可
3. 也可以理解为预先定义好的ViewModel类

组件的目标
为了可重用性高，减少重复性开发，我们可以按照template、style、script的拆分方式，放置到对应的.vue文件中。

组件的核心
模板template：模板反映了数据和最终展现给用户的DOM之间的映射关系，
初始数据data：一个组件的初始数据状态，对于可重复的组件来说，通常是私有的状态。
接收的外部的参数（props）：组件之间通过参数来进行数据的传递和共享，参数默认是单项绑定，但也可以显示声明为双向绑定。
方法（methods）：对数据的改动操作一般都在组件内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。
生命周期函数（钩子函数）：一个组件会触发多个生命周期函数，在这些钩子函数中可以封装一些自定义逻辑。可以理解为controller的逻辑被分散到了这些钩子函数中。

注册组件

注册组件就是利用Vue.component()方法，先传入一个自定义组件的名字，然后传入这个组件的配置。

注册组件的两种方法：
全局组件
直接使用Vue.component()创建的组件，所有的Vue实例都可以使用。
使用三部曲1.定义这个组件；2.注册这个组件；3.使用这个组件；

局部组件
和全局组件的区别就是，它的component写在你要在哪个组件中利用，不能写在外面，这里先写在new Vue中

组件间的传值

父组件给子组件传值
方法，口诀：
1、在父组件调用子组件的地方，给它添加一个自定义的属性 test, 属性的值为 测试
2、在子组件定义的地方，添加一个选项 props， 值为数组， 数组元素为之前自定义的属性 test
3、接下来就可以在子组件中通过 {{ test }}或者其他的vue的用法使用这个值
父组件在调用子组件的地方，添加一个自定义的属性，属性的值为你需要传递给子组件的值，
在子组件定义的地方，添加了一个props选项，它的值是一个由自定义属性组合而成的数组，
在子组件的模板中，通过自定的属性名就可以获取到父组件传递过来的值

在这里插入代码片
  

    
  

props注意的点

父组件在调用子组件的地方，添加一个自定义的属性，属性的值为你需要传递给子组件的值，如果需要传递的值是变量，那么需要使用到绑定属性
在子组件定义的地方，添加了一个props选项，它的值是一个由自定义属性组合而成的数组或者是一个对象，如果需要数据类型的校验，则使用对象，否则可以使用数组，
在子组件的模板中，通过自定的属性名就可以获取到父组件传递过来的值

假如父组件给子组件传的值是子组件不想要的呢？ — 子组件需要验证数据的类型，这一步是项目中常用的
验证数据的类型有两种方法：

两种方法都可以验证数据的类型，第二种多了默认属性，当没有传值或者传错值后，会发送一个默认值

## 子组件给父组件传值
方法、口诀：水往地处流，如果向往高处流，就需要付出代价
1.子组件中，通过某一个事件，执行 this.$emit(‘自定义的事件’, ‘需要传递的值’)
2、在父组件调用子组件的地方，给它 绑定了 子组件中 自定义的事件，事件的实现由父组件实现，注意绑定事件中不要添加（）
3、在父组件中实现时添加 参数，参数就是传递过来的值

子组件中，通过某一个事件，执行 this.$emit(‘自定义的事件’, ‘需要传递的值’)，在父组件调用子组件的地方，给它 绑定了 子组件中 自定义的事件，事件的实现由父组件实现，注意绑定事件中不要添加（），在父组件中实现时添加 参数，参数就是传递过来的值

非父子组件间传值
(事件车—原理也是事件的订阅发布模式)
1、每一个vue的实例都是独立的；相互之间不能直接进行改变数据
2、给两个不同的组件找一个载体；把共同的方法放在这个载体上，这个载体就是 let eventBus = new Vue; // 创建一个新的vue实例；
3、在这个新的实例上，有 $on: 订阅 $emit：发布，$on的绑定要基于钩子函数，一般放在created或者mounted上

动态组件
< component is=“组件名称”>< /component>
动态组件
如果每一个组件内部含有 表单元素 ，默认在动态组件切换的时候，表单数据会有所丢失
动态表单
可以使用 < keep-alive>< /keep-alive> 包裹动态组件，避免组件的重新渲染（手机按home键并不是退出了系统的应用程序）
keep-alive.html
如果书写形式为 < keep-alive include=“a,b”>< /keep-alive> ,那么表示只有 a 和 b 的组件的装填会被保留，而其余的组件都是先卸载，需要的时候再装载， a 和 b为定义组件的时候的name选项的值include.html
组件的钩子函数有两大对比
销毁 创建 ---- 动态组件 动态组件 — 不会触发 activated 和 deactivated
显示 隐藏 ------ 动态组件 + keep-alive keep-alive.html — 所有的组件都只创建了一遍
生命周期钩子函数
beforeCreate
created
beforeUpdate
updated
beforeMount
mounted
beforeDestroy
destroyed
activated ----- 跟keep-alive配合使用 — 组件激活时调用
deactivated ----- 跟keep-alive配合使用 — 组件停用时调用

  

    AAA
    BBB
    CCC