17、生命周期&数据共享

1、生命周期 & 生命周期函数

• 生命周期（Life Cycle）是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段
• 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行
• 注意：生命周期强调的是时间段，生命周期函数强调的是时间点

2、父子组件之间的数据共享

2.1 父组件向子组件共享数据（需要使用自定义属性）

父组件：

<template>
  <div>
    <son :msg="message" :user="userinfo">son>
  div>
template>

<script>
import son from "./son.vue";
export default {
  components: { son },
  data() {
    return {
      message: "hello vue.js",
      userinfo: {
        name: "张无忌",
        age: 25,
      },
    };
  },
};
script>
<style>
style>

子组件：

<template>
  <div>
    <h5>Son组件h5>
    <p>父组件传过来的 msg 值时：{{ msg }}p>
    <p>父组件传过来的 user 值时：{{ user }}p>
  div>
template>

<script>
export default {
  props: ["msg", "user"],
};
script>

<style>
style>

2.2 子组件向父组件共享数据（需要自定义事件）

父组件：

<template>
  <div class="fatherContainer">
    <p>父组件中countFromSon的值：{{ countFromSon }}p>
    <son @numchange="getNewCount">son>
  div>
template>

<script>
import son from "@/components/son.vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      countFromSon: 0,
    };
  },
  methods: {
    getNewCount(val) {
      this.countFromSon = val;
    },
  },
};
script>
<style lang="less" scoped>
.fatherContainer {
  background-color: springgreen;
}
style>

子组件：

<template>
  <div class="sonContainer">
    <p>count的值是：{{ count }}p>
    <p>{{ person }}p>
    <button @click="add">+1button>
  div>
template>

<script>
export default {
  data() {
    return {
      count: 0,
      person: {
        name: "张无忌",
        age: 24,
      },
    };
  },
  methods: {
    add() {
      this.count++;
      //   修改数据时，通过$emit()触发自定义事件
      this.$emit("numchange", this.count);
    },
  },
};
script>

<style lang="less">
.sonContainer {
  background-color: peru;
}
style>

3、兄弟组件之间共享数据

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

eventBus.js 模块：

import Vue from 'vue'
// 向外共享Vue的实例对象
export default new Vue()

发送方：

<template>
  <div class="fatherContainer">
    父亲组件
    <p>
      父组件中 msg 的值：<b>{{ msg }}b>
    p>
    <button @click="sendMsg">发送数据button>
  div>
template>

<script>
import bus from "@/eventBus.js";
import son from "@/components/son.vue";
export default {
  components: {
    son,
  },
  data() {
    return {
      msg: "为中华崛起而读书!!!",
    };
  },
  methods: {
    sendMsg() {
      bus.$emit("share", this.msg);
    },
  },
};
script>
<style lang="less" scoped>
    .fatherContainer {
      background-color: springgreen;
    }
style>

接收方：

<template>
  <div class="matherContainer">
    母亲组件
    <p>父亲组件传过来的值是：{{ msgFromFather }}p>
  div>
template>

<script>
import bus from "@/eventBus.js";
export default {
  data() {
    return {
      msgFromFather: "",
    };
  },
  created() {
    bus.$on("share", (val) => {
      this.msgFromFather = val;
    });
  },
};
script>

<style lang="less">
    .matherContainer {
      background-color: tomato;
    }
style>