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>

你可能感兴趣的:(Vue,vue.js,前端,javascript)