生命周期

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

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

注意：生命周期强调的是时间段，声明周期函数强调的是时间点。

LifeCycle

数据共享

项目开发中，组件间最常见的关系分为如下两种：

  1. 父子关系
  2. 兄弟关系

父子之间数据共享

父子之间数据共享又分为：

  • 父 -> 子 数据共享
  • 子 -> 父 数据共享

父组件向子组件共享数据

父组件向子组件共享数据时，需要使用自定义属性。

1
2
3
4
5
6
7
8
9
<script>
    //父组件
    <Son :msg="message" :user="userinfo"></Son>
    
    data() {
        message: 'hello, vue.js',
        userinfo: { name: 'zs', age: 20 }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
<template>
	//子组件
	<div>
        <h5>Son组件</h5>
        <p>父组件传来的是：{{ msg }} {{ user }} </p>
    </div>
</template>

<script>
    props: ['msg', 'user']
</script>

子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export default {
    data() {
        return { 
            //子组件自己的数据，将来传给父组件
            count: 0 
        }
    },
    methods: {
        add() {
            this.count += 1
            //修改数据时，通过$emit()触发自定义事件
            this.$emit('numchange', this.count)
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<Son @numchange="getNewCount"></Son><>
export default {
    data() {
        return { 
            countFromSon: 0 
        }
    },
    methods: {
        getNewCount(val) {
            this.countFromSon = val
        }
    }
}

兄弟组件之间的数据共享

在vue2.x中，兄弟组件之间的数据共享的方案是EventBus。

brother

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