vue父组件给子组件传值

注：文章中难免会存在问题，欢迎大家一起沟通，并指正文章中存在的问题。

一、父组件给子组件传值

1、思路：父组件监听界面的变化（样式的变化或数据的变化），并把变化的值传递给子组件、子组件监听传递的值给需要的区域赋值。

2、监听：

computed:{
    leftHeadPartTwoLeftData()
    {
      return {
         height:((this.browserHeight - 110))/10*6.5-1,
         data:this.workProcesData
      }
    }
}
           

3、传值（给子组件）：把值赋给自定义属性(workProcesParams)，并在子组件里面接收workProcesParams的值

4、接收值（子组件）：

props:{
    workProcesParams: {
        type:Object,
        default: {}
    }
  }
           

注意：这里的类型需要和传递的值的类型一致，避免类型不一致报错。

5、类型不一致报错：这里之前我传递的是array类型，但是实际是接收的是object.

6、监听接收的值（子组件）：

watch:{
    //深度监听
    // workProcesParams: {
    //     deep: true,
    //     handler: function (newVal,oldVal){
    //         console.log('newValue', newVal);
    //         console.log('oldValue', oldVal.text);
    //     }
    // }
    //普通监听
    workProcesParams(newVal,oldVal)
    {
      debugger;
      this.timeLineData=newVal.data;
      this.height=newVal.height;
    }
  }
           

7、初始化赋值：

created(){
    debugger;
    this.timeLineData=this.workProcesParams.data;
    this.height=this.workProcesParams.height;
    console.log(this.height);
  },