vue 父组件给子组件传值问题记录

在父组件中请求数据成功，也成功传递给子组件。但是我后来发现只有在单独刷新子组件时数据才传递过来并成功展示了，在父组件中刷新保存，或者在页面里刷新不会展示，并且没有传值。

后来在论坛上终于找到解决方法。

是因为父组件的渲染是先渲染子组件，再渲染父组件，所以当子组件接收值时，父组件还没有开始请求。

解决方法 1. 在父组件中使用v-if 并定义一个值 

如：

      <myButton  :stateData="stateData" v-if="isShow"/>

 当 isShow=true的时候，才加载子组件

在父组件的data中定义isShow = false,

在父组件请求数据的函数中设置 isShow = false

2.在子组件中使用watch监控父组件传递的值发生变化时重新赋值

 data(){
return {
stateData:[]
}
},
props: {
//父组件传过来的值
     buttonSelectOptions: {
      type: Array,
      required: true,
      default() {
        return [];
      },
    },
}
mounted() {
  this.show();
  },
methods: {
   //将父组件传递过来的值赋值给子组件中定义的数组
    show(){
      this.Options = this.buttonSelectOptions;
      this.stateOption = this.stateData;
    }
  },

  watch:{
    buttonSelectOptions:{
      handler(newVal,oldVal){
        this.Options = newVal;
        this.show();
      },
      deep:true
    }
  }