持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情
前言
大家好呀，我是L同学。在上篇文章vue知识点总结（一）—— 组件化开发中，我们学习了vue相关知识点，包括组件化开发、组件注册等相关知识点。今天，在这篇文章中，vue其他的相关知识点，包括组件通信、生命周期等相关知识点。
组件通信
每个组件都有自己的数据, 提供在data中, 每个组件的数据是独立的, 组件数据无法互相直接访问。但是如果需要跨组件访问数据, 就需要用到组件通信。组件通信的方式有很多，比如父传子、子传父。
父传子props传值
父组件通过给子组件加属性传值。
<jack price="100" title="不错" :info="msg"></jack>
子组件中, 通过props属性接收。
props: ['price', 'title', 'info']
props校验
props 是父传子, 传递给子组件的数据, 为了提高子组件被使用时的稳定性, 可以进行props校验, 验证传递的数据是否符合要求。
默认的数组形式, 不会进行校验, 如果希望校验, 需要提供对象形式的 props。
props: {
...
}
props 提供了多种数据验证方案，例如：
- 基础的类型检查 Number
- 多个可能的类型 [String, Number]
- 必填项校验 required: true
- 默认值 default: 100
- 自定义验证函数
{
props: {
// 基础的类型检查
propA: Number,
// 多个可能的类型
propB: [String, Number],
// 必填的字符串
propC: {
type: String,
required: true
},
// 带有默认值的数字
propD: {
type: Number,
default: 100
},
// 自定义验证函数
propF: {
validator: function (value) {
// 这个值必须匹配下列字符串中的一个
return ['zs', 'ls', 'ww'].includes(value)
}
}
}
}
props和data区别
组件中的数据来源有data和props。data 中的数据允许修改, props 中的数据不允许修改。遵循开发规范: 单向数据流。
子传父
子组件可以通过 this.$emit('事件名', 参数1, 参数2, ...) 触发事件的同时传参的。
this.$emit('say-price', this.item.id, Math.floor(Math.random() * 3) + 1) // 1 2 3
父组件给子组件注册一个自定义事件。
<my-product
...
@say-price="sayPrice">
</my-product>
父组件并提供对应的函数接收参数。
methods: {
sayPrice (num) {
console.log(num)
}
},
通用组件通讯方案 —— event-bus
如果两个组件的关系非常的复杂，那么通过父子组件通讯是非常麻烦的。这时候可以使用通用的组件通讯方案：事件总线（event-bus)。
- 创建事件总线，在main.js文件中
1. 创建事件总线 main.js
const bus = new Vue()
// 把bus挂载到了Vue的原型上, 保证所有的组件都能通过 this.bus访问到事件总线
Vue.prototype.bus = bus
- 通过this.bus.$on('事件名', 事件回调函数)订阅事件。
2. 订阅事件
bus.$on('事件名', 事件回调函数)
bus.$on('send', msg => {
})
- 通过this.bus.$emit('事件名', 额外参数)发布事件。
bus.$emit('事件名', 额外参数)
bus.$emit('send', 'hello')
生命周期
生命周期指的是一个事物从出生到消亡的全部过程。
生命周期（Life Cycle）是指一个组件从创建->运行->销毁的整个阶段，强调的是一个时间段。例如，张三出生，表示这个人生命周期的开始。张三离世，表示这个人生命周期的结束。中间张三的一生，就是张三的生命周期。
我们可以把每个vue组件运行的过程，也概括为生命周期。
- vue 组件的初始化，表示生命周期的开始。
- vue 组件的销毁，表示生命周期的结束。
- vue 组件中间运行的过程，就是组件的生命周期。
生命周期函数（钩子函数）
生命周期函数是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。生命周期函数的作用是允许我们在特定的时间点，执行某些特定的操作。例如，组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据。
