关于vue2中父子组件动态传值的总结

• 需求： 父组件通过一个下拉框控制传递不同的数据给子组件（父组件使用Object.assign()重新定义一个新的对象），子组件负责渲染最新的数据

• 问题： 子组件数据获取最新，但视图变化顺序不对，总是渲染之前的数据

  // 父组件
  mounted() {
     this.getInfo(参数)； // 发送ajax请求获取带传递的prop
  }
  
  methods: {
  	getInfo(xx) {
  	 let obj = {....}
       this.myInfo = Object.assign(this.myInfo, obj)
  	},
  	change(val) {
  	   xxxxx;
  	   this.getInfo(xx)
  	}
  }
  

• 解决方案：

  1. 使用watch监听props, change的时候子组件渲染有问题

      xxObj: {
         handler () { 
            this.handlexx()
         },
         deep: true,  // 可以深度检测到 obj 对象的属性值的变化
         immediate: true //刷新加载  立马触发一次handler
        }
     

  2. 使用this.$refs.xxName.getData(oo), 父调用子方法传值；change的时候子组件渲染有问题

        // 子组件
        getData(oo) {
          this.myData = oo;
          this.$nextTick(() => {
            this.xxx()
          })
        }
     

  3. 强制子组件渲染： 使用v-if，初始设置为false，当获取数据设置为true， change的时候先回归值为false （成功！！）

      < SonComponent  v-if="isShow"/>
        // v-if 是对dom的创建和删除，对于频繁切换不友好，如果需要频繁切换，不建议使用，建议下面一种
     

  4. 强制子组件渲染： 使用key属性 （简直了，一般数据渲染的时候用key，没想到还可以控制组件渲染！道理是相通的）

     		    < SonComponent   :key="myKey"/>
     		    // 设置动态key， 当数据成功获取时候，改变key让组件渲染，比如初始为key=0，接口成功后key++， change中都不需要修改了
     

— 其实，我也不是很明白为什么前两种不行，数据和视图显示不一致，望知道的大佬帮忙指导下！！！