Vue2回顾---④

七、
组件的生命周期
组建的生命周期主要有创建、挂载、更新和销毁四个
每个部分对应有两个内置函数
在不同的生命周期阶段都可以通过这两个内置函数进行操作
详情介绍可以参考：
https://baijiahao.baidu.com/s?id=1668393188098846185&wfr=spider&for=pc

---

八、
组件之间的数据共享
组件之间的关系主要有
1.父子 2.兄弟
先来说说父子之间的数据传递
父 ->子
父向子传递数据主要通过props自定义属性

比如
父组件

<div>
    <Son :num='number'></Son>
</div>

<script>
//components来注册组件
export default{
    components:{
    Son
    }
    data(){
    return{
    number:30
    }
    }
}
</script>

子组件

<div>
    <p>父组件传过来的num为:{{num}}</p>
</div>

<script>
export default{
props['num']
}
</script>

这样父组件就会把30传给子组件的num

子->父
子组件传递数据给父组件需要用到自定义函数
子组件方法：
this.$emit(‘sonnum’,‘snum’)
sonnum是子组件自定义的一个传递名字（相当于snum的一个代号）
snum是子组件中data原来就有的数据名

父组件方法:
调用子组件时 加入属性@sonnum = ‘fathernum’
sonum就是那个规定好的代号
father是父组件data里原有的方法名（相当于把sonmun作为参数传递过来）
fathernum(val){
this.fnum = val
}
fnum是父组件data里的一个数据名
val就是sonnum的值

这样snum的值就传给了fnum

兄弟之间传递
兄弟组件之间的数据传递主要通过eventbus这样一个js文件来作为中间的桥梁
新建一个eventbus.js文件（名字自拟） 然后导入Vue 再实例化一个Vue对象向外导出

发送方A导入eventbus.js 文件
import bus from ‘eventbus.js’
然后通过bus.$emit(‘自定义方法名字’，‘要传递的数据’)

接收方B同样也要导入eventbus.js文件
然后通过bus.$on(‘自定义方法名字’,val =>{“val就是从A收到的数据值”})