时间：2022-05-15

问题描述

刚刚开始做项目，没有多少工作经验，好不容易查做了父子组件传值。却发现子组件不能自动更新出来。

需要手动刷新浏览器才能展示出来；

问题分析

（1）其实主要是，当数据从父组件传入到子组件之后，子组件内没有进行数据监听；

（2）当在父组件内进行创建数据时，子组件没有渲染出来；（类似于表格数据创建，但是创建的数据没有渲染出来）；
	【当然保证在，不是因为后台限制的情况下】

解决方式

1、首先确定传入的值

（1）首先在 props （父 =》子）传入的值为 value；

（2）类型： type 传入值的类型；

（3）是否必须传入：required  在使用子组件时，是否一定要传入这个值；

javascript">props: {
   value: {
     likes: "object",
     type: Object,
     required: true,
   },
 },

2、监听这个传入的值（重点）

（1）写在 watch 里面；

（2）这个【监听函数名称】要和【传入值名称】相同；

（3）subValue 是需要 return 出去，此时父组件就可以自动渲染子组件了；

（4）immediate: true,   就是首次进行添加使用子组件时，就直接触发（重点：大多数是这个原因）；

监听写法：

javascript"> watch: {
   immediate: true,
   value() {
     this.subValue = this.value;
   },
 },

整体代码：

javascript"><script>
export default {
  name: "SonComponents",
  data() {
    return {
      subValue: {},		// 2、return 返回 subValue 出去 
    };
  },
  props: {
    value: {
      likes: "object",
      type: Object,
      required: true,
    },
  },
  watch: {
    immediate: true,
    value() {
      this.subValue = this.value;	// 1、监听父组件传入值 value 
    },
  },
};
</script>

附加

这是我之前找到的父子传值使用，写的文章；

父子传值 props emits