Vue子组件props从父组件接收数据并存入data

父组件
<template>
  <div>
    <children :father="father"></children>
  </div>
</template>
<script>
import children from "./children";
export default {
  components: { children },
  data() {
    return {
      father: null
    };
  },
  mounted() {
    setTimeout(() => {
      this.father = { name: "父亲" };
    }, 1000);
  },
  methods: {}
};
</script>

子组件
<template>
  <div></div>
</template>
<script>
export default {
  data() {
    return {
      student: {
        name: "张三"
      }
    };
  },
  props: {
    father: {
      type: Object,
      default: () => {}
    }
  },
  watch: {
    father: {
      handler(newVal) {
        this.fatherData =newVal
        console.log(this.fatherData);
      },
      deep: true,
      immediate: true
    }
  },
  created() {},
  mounted() {
    console.log(this.father);
  },
  methods: {}
};
</script>

//也可以这样，简洁一些
 <div>
    <children v-if="father" :father="father"></children>
  </div>

watch: {
    father: {
      handler(newVal) {
        this.fatherData =newVal
        console.log(this.fatherData);
      },
      deep: true,
      immediate: true
    }
  },