VUE中性子コンポーネントを作成し、問題の値を取得するために取り付けられたフックは小道具未満であります

息子通信コンポーネント

公式サイトは、に小道具を使用してサブアセンブリを受けて、親コンポーネントは、V-バインドにバインドされている使用して、非常に単純な、非常に明確である
例：
親要素：

< テンプレート> 
    < DIV > 
        < ヘッドトップ> </ ヘッドトップ> 
        < 部クラス= "DATA_SECTION" > 
            < ヘッダ・クラス= "チャートタイトル" >数据统计</ ヘッダ> 
            < EL-行：樋= "20 " クラス="チャートヘッド」> 
                < EL-COL ：XS = "24" ：SM = "12" ：MD = "6" ：LG = "6" > <div クラス=「グリッドコンテンツデータヘッドブルーヘッド」>统计：</ DIV > </ EL-COL > 
                < EL-COL ：XS = "24" ：SM = "12" ：MD = "6" ：LG = "6" > < DIV クラス= "グリッドコンテンツデータ-head」>销售数量< スパン> {{数}} </ スパン> </ DIV > </ EL-COL > 
                < EL-COL ：XS = "24" ：SM = "12" ：MD = "6" ：LG = "6" > <div クラス=「コンテンツデータ・グリッド・ヘッド」>売上額< スパン> {{量}} </ スパン> </ DIV > </ EL-COL > 
                < EL-COL ：XS = "24" ：SM = "12" ：MD = "6" ：LG = "6" > < DIV クラス= "グリッドコンテンツデータヘッド" >利润统计< スパン> {{利益}} </ スパン> </ DIV > </ EL-COL > 
            </ EL-行> 
        </ セクション> 
        <チャート：chartData = "chartData" > </チャート> 
    </ DIV > 
</ テンプレート> 

< スクリプト> 
    データ（）{ 
            リターン{ 
                数：ヌル、
                量：ヌル、
                利益：ヌル、
                chartData：[ 10 、10 、10 ] 
            } 
        } 
</ スクリプト>

サブコンポーネント：

エクスポートデフォルト{ 
    小道具：[ 'chartData' ] 
}

この場合、サブアセンブリの方法小道具の値では、あなたは直接使用撮りたいこの .chartDataをすることができます
が、書き込みの場合、あなたがあり chartData 内側と値が固定されていないが、ダイナミックな買収は、どのケースの下に、あなたは見つける方法は、あなた未満取っている chartData 、またはデフォルト値にとられています。

たとえば、以下の例の
親コンポーネント：

<スクリプト> 
    データ（）{ 
            リターン{ 
                番号：ヌル、
                金額：ヌル、
                利益：ヌル、
                chartData：[] 
            } 
        }、
        マウントされた（）{ 
            この.getStatistics（）; 
        }、
        メソッド：{ 
            // 統計取得
            getStatisticsを（ ）{ 
                にconsole.log（ '取得統計' ）
                axios.post（API、{ 

                }）。次に、（（RES） => {
                     この.NUMBER = res.data.domain.list [0 ] .NUMBER。
                    この .amount = res.data.domain.list [0 ] .amount。
                    これは、 = res.data.domain.list [0 .profits ] .profitsと、
                    この .chartData = [ この .NUMBERは、この .amountは、これは.profits]。
                }）。キャッチ（（ERR）=> { 
                    にconsole.log（ERR）; 
                }）
            } 
        }
 </ SCRIPT>

このとき、使用する方法は、サブアセンブリこの .chartDataの（空であるとして）を見つけるには存在しません。

これは私が時計の使用に対処するものです。

次のように解決策は以下のとおりです。

利用ウォッチ：

エクスポートデフォルト{ 
    小道具：[ 'chartData' ]、
        データ（）{ 
            リターン{ 
                CDATA [] 
            } 
        }、
        時計：{ 
            // 方法CDATAに正しい割り当て 
            chartData：関数（newValに、OLDVAL）{
                 この .cData = newValに。   // chartDataあるnewValに 
                newVa Lは&& この .drawChart（）; // newValには、実行される機能の存在drawChar 
            } 
        }、
        メソッド：{ 
            drawChart（）{ 
                // 追加のロジックを実行
             }
        }
　　　　　
        搭載（）{ 
            // 作成し、このライフサイクルにおいて、取り付けられ、this.cData割り当てにエラーの割り当て方法を失敗する
            // ; this.cData = this.chartData 
        } 
}

リスニング chartDataのそれは空からの移行をトリガする値を、この時間はに得ることができるようになります、そして後処理方法もの値を取得するために行う必要があり、時計の実行中を。

//概要

この理由は、親アセンブリとして渡す必要があるように思われる小道具プロパティは、AJAXリクエストを介して返される発生し、この要求の処理に時間がかかりますが、レンダリングは、サブアセンブリのAJAX要求処理よりも高速である、ので、これをときに作成は、マウントフックのライフサイクルでそう一度だけ、行われていたが、ない小道具は（サブコンポーネント）に来て流れない、あなただけのデフォルト値を取得することができます。

転載： https://blog.csdn.net/zmkyf1993/article/details/80320802