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);
  },