Vue总结2.0父子组件传值以及父子之间的生命周期函数（基于项目总结）

一、Vue父子组件传值

1、父组件向子组件传值
使用v-bind绑定 + props

<!-- 父组件father.vue -->
<template>
  <div>
    <div>这是父组件要传给子组件的参数:{{msg}}</div>
    <!-- 1.传递: value1为动态参数msg的参数名，名字自定义，与子组件接收参数名同名⭐
    		    value2为静态参数的参数名，名字自定义，与子组件接收参数名同名 -->
    <child :value1="msg" value2="我是父组件传过来的静态参数"></child>
  </div>
</template>
<script>
  import child from "./child";
  export default {
      data() {
          return {
              msg:"我是父组件传过来的动态参数"
          }
      },
    components: {
      child
    }
  };
</script>

<!-- 子组件child.vue -->
<template>
  <div>
    <!-- 3.使用：这里就是接收的父组件传来的参数 -->
    <div>接受的父组件动态参数：{{ value1 }}</div>
    <div>接受的父组件静态参数：{{ value2 }}</div>
    <div>接受的父组件参数：{{ value }}</div>
  </div>
</template>
<script>
  export default {
    // 2.接收：props接收父组件参数，value1与value2为传递参数的参数名，与父组件内同名
    props: ["value1", "value2"],
    data() {
      return {
        value: "默认值"
      };
    },
    // 3*.使用：直接用this调用
    mounted() {
      this.value = this.value1;
    }
  };
</script>

运行结果如图所示：

补充：父组件在给子组件传值的时候为什么子组件的生命周期中没有办法直接取到父组件的参数?与父子间的生命周期顺序有关。

2、子组件向父组件传值
使用$emit + 事件绑定@

<!-- 子组件child.vue -->
<template>
  <div>
    <!-- 这里是子组件给父组件传值 -->
    <input type="button" value="点击向父组件传参" @click="giveFather">
    <!-- 子组件可以通过绑定一个事件来触发函数，函数里可以进行对父组件的传值操作。
    事件可以是基本Dom操作、自定义事件、还有一些框架组件封装好的事件，
    比如uni-app中的switch按钮的@change事件，当按钮状态改变的时候就会触发对应方法进行传值等操作 -->
  </div>
</template>
<script>
  export default {
    data(){
      return{
        cmsg:'我是子组件的参数'
      }
    },
    methods: {
      giveFather(){
        // 1.子组件触发父组件方法
        // $emit第一个参数为所要触发的父组件函数，函数名可自定义但要与父组件中对应函数名同名。
        // $emit第二个参数就是子组件向父组件传递的参数，也可以传多个参数，向后面依次添加即可。
        this.$emit('receive',this.cmsg);
        // 多个参数：this.$emit('receive',cmsg1,cmsg2)
        // giveFather(cmsg1,cmsg2) 方法要传递对应的形参！！
      }
    },
  };
</script>
<style scoped></style>

<!-- 父组件father.vue -->
<template>
  <div>
    <div>接收子组件参数: {{ fmsg }} </div>
    <!-- 2.在对应子组件上绑定函数，这里“receive”是函数名(或事件名)，可自定义但要与子组件触发函数同名 -->
    <child @receive="fromChild"></child>
  </div>
</template>
<script>
  import child from "./child";
  export default {
    data() {
      return {
        fmsg:''
      };
    },
    methods: {
      // 接收子组件参数，赋值
      fromChild(data){
        this.fmsg = data;
      }
    },
    components: {
      child
    }
  };
</script>
<style scoped></style>

运行结果如图所示：

二、Vue父子之间的生命周期函数

首先我们来看一下父子组件之间生命周期函数的执行顺序：

然后根据父子组件之间的生命周期函数执行的顺序，谈一谈我在项目中遇到的有关问题：
⭐问题一：父组件中的要传递的 props 属性是通过在created生命周期中发生ajax请求回来的一个数据，子组件的前四个生命周期中都无法拿到这个对象？
⭐原因是：父组件的created函数中调用某个方法而方法会去请求接口，而这个请求是属于异步操作，此时会把异步操作放到消息队列中，等到后面的父子生命周期函数等一系列同步任务执行完成后，会执行异步任务，即读取消息队列的任务，执行回调函数（这点可以去了解一下JS的单线程特点）。此时接口才会返回数据，父组件中的变量才能拿到该数据，但是子组件中的 created 、 mounted 这样只会执行一次的生命周期钩子，已经执行了，所以子组件的前4个生命周期是无法拿到父组件调接口拿来的数据的。
⭐问题二： 子组件加上 ref ,父组件使用 $refs ，在父组件的created函数中无法操作子组件？
⭐原因是： $refs只在组件渲染完成后才填充，并且它是非响应式的，所以只有在子组件的mounted生命周期函数之后即子组件的dom元素渲染完成后，父组件才可以通过 $refs 直接操作子元素，由上图顺序可知父组件的created函数中无法通过 $refs 操作子组件。