vue2组件的简单使用

记录下vue2中组件的简单使用，请看下导图：

父子间值的传递以及兄弟间的通讯

1.使用prop和$emit来实现
2.vuex来实现(全局唯一的数据仓库，后续会细说）
3.全局事件总线Eventbus来实现（适用于任意间组件之间的通信）

通过prop和$emit来实现的代码如下：

父组件代码：

<template>
  <div class="">
    <!-- 父组件给子组件传递的数据  和事件 -->
    <HelloWorld :msg="data" @handleMsg="handleChildrenMsg" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";
export default {
  name: "App",
  components: { HelloWorld },
  data() {
    return {
      data: "传递给子组件的数据",
    };
  },
  methods: {
    // Childdata为子组件调用$emit传递过来的数据
    handleChildrenMsg(Childdata) {
      this.data = Childdata;
    },
  },
};
</script>

<style lang="scss" scoped></style>

子组件的代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="handleClick">修改数据</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  // props:['msg'], //简单的写法
  // prop 类型和默认值
  props: {
    msg: String,
    default() {
      return "我是默认值"; //如果父组件没有给子组件传递msg,就展示默认值
    },
  },
  methods: {
    handleClick() {
      // 在这里调用父组件传递过来的事件，第二个参数是可以传递数据的
      this.$emit("handleMsg", "我是子组件想要修改成的数据");
    },
  },
};
</script>

<style scoped></style>

全局事件总线的使用
1.需要在src目录下新建个EventBus.js文件，代码如下：

import Vue from "vue";
// 相当于直接定义个vue实例导出，利用其中的$on,$emit,$off等方法来实现
export const EventBus = new Vue();

2.绑定自定义事件：EventBus.$on(“方法名和调用自定义事件时的方法名保持一致”, 另外自己定义的方法);
哪里需要使用别的组件传递过来的数据时，就绑定自定义事件

3.调用自定义事件：EventBus.$emit(“方法名和绑定自定义事件时的方法名保持一致”, 传递的数据）
也就是说哪里需要传递数据，哪里调用自定义事件
这个地方一触发，就会触发自定义绑定的地方

4.及时销毁，避免造成内存泄露： EventBus.$off("方法名和绑定自定义事件时的方法名保持一致 ", 与绑定自定义事件中定义的方法一样 );

具体的代码如下：

组件的生命周期
生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
主要是四个阶段：创建阶段，挂载阶段，更新阶段，销毁阶段
常用的有如下8个：
1.beforeCreate():数据劫持之前被调用，无法访问mothods,data,computed上的方法和数据
2.Created(): 在实例创建完成后被立即同步调用, 常用于ajax发送请求获取数据
3.beforeMount():在挂载开始之前被调用
4.mounted():实例被挂载后调用,可以获取到dom元素，进行dom的操作
5.beforeUpdate():数据发生改变后,dom被更新之前被调用
6.updated():数据更改导致的虚拟dom重新渲染和更新完毕之后被调用。
7.beforeDestroy():实例销毁之前调用。在这一步，实例仍然完全可用,可以使用vm的所有属性和方法,主要进行定时器，请求的销毁和取消，避免造成内存泄漏
8.destroyed():实例销毁后调用。

还有组件间使用keep-alive时也会产生两个生命周期钩子函数：

1.activated 被 keep-alive 缓存的组件激活时调用。
2.deactivated 被 keep-alive 缓存的组件失活时调用。

还有个捕获错误的生命周期函数：
1.errorCaptured – 错误处理机制