VUE-cliの共通パラメータ渡しモード

記事の内容：親子コンポーネントでVUE質量参加、完成していない・ダ・ダ・ダ

まず、父と息子のコンポーネント

父から息子へ1.1（小道具）

<！ - 親コンポーネントのfather.vue - > 
< テンプレート> 
  < divの> 
    < divの>ここで父親のコンポーネントです。</ divの> 
    < divの>親要素のサブアセンブリに渡されるパラメータです：MSG} {} { < / DIV > 
    <！ - 1.配達：DATA1のMSG動的パラメータは、パラメータ名、カスタムの名前、受信パラメータサブアセンブリと同じ名前である
    DATA2静的パラメータのパラメータ名、カスタムの名前、受信パラメータサブアセンブリと同じ名前- > 
    < 子供：DATAL = "MSG" DATA2 = "777" > </ 託児> 
  </ DIV > 
</ テンプレート> 
<スクリプト>
  子供をインポート「./child 」。
  エクスポートデフォルト{ 
      データ（）{ 
          リターン{ 
              MSG：" 666 " 
          } 
      }、
    コンポーネント：{ 
      子
    } 
  }。
</ スクリプト> 
< スタイルはスコープ> </ スタイル>

<！ - サブアセンブリのchild.vue - > 
< テンプレート> 
  < divの> 
    < divの>これは、子要素である</ DIV > 
    <！ - 3.：これは、受信した親コンポーネントのパラメータである- > 
    < divの>受け入れ親コンポーネント動的パラメータ：{{DATAL}} </ DIV > 
    < DIV >に許容される親要素静的パラメータ：{{DATA2}} </ DIV > 
    < DIV >親成分パラメータ受け入れ：{{データ}} < / DIV > 
  </ DIV > 
</ テンプレート> 
<スクリプト>
  エクスポートデフォルト{
     // 2.受信：親コンポーネントパラメータを受信小道具、親コンポーネント内の同じ名前のパラメータ名DATA2 DATALと伝送パラメータ
    小道具：[ 「DATAL 」、「DATA2 」]、
    データ（）{ 
      リターン{ 
        データ：" デフォルト" 
      ;} 
    } 
    // これと直接3：コール
    マウント（）{
       この.DATA =  この.data1; 
    } 
  }; 
</ スクリプト> 
< スタイルスコープ> </ スタイル>

次のようにページデータの効果があります

ここで少し注意することは、ライフサイクルでの割り当てを取得するために必要とされる場合に渡された親コンポーネントのパラメータは、それがマウントさをバインドすることはできません、この呼び出しではそうでない場合は、サブ組立方法は成功しません。ライフサイクル順：父beforeMount->子beforeCreate ......サブmounted->親がマウント

1.2親子送信（$発します）

<！ - サブアセンブリのchild.vue - > 
< テンプレート> 
  < divの> 
    < divの>これは、子要素である</ DIV > 
    <！ - これは受信された親コンポーネントのパラメータ- > 
    < INPUTのタイプ= "ボタン" 値は= "親要素のパラメータ渡しをクリックし、" @click = "toFather" > 
  </ DIV > 
</ テンプレート> 
< スクリプト> 
  エクスポートデフォルト{ 
    データ（）{ 
      リターン{ 
        CMSG："私は、パラメータのサブアセンブリです"  
      }
    }、
    方法：{ 
      toFather（）{ 
        // 親の1サブアセンブリのトリガーアセンブリ法
        // $は最初のパラメータを発するがトリガされるべき親コンポーネントの関数であるが、関数名は、親コンポーネントと同じ名前に対応する機能のためにカスタマイズすることができる
        // 二番目のパラメータ$のEMITサブアセンブリは、親要素のパラメータに伝達され、
        この$ EMIT（。' 受信' 、この.cmsgを）; 
      } 
    }、
  }; 
</ スクリプト> 
< スタイルはスコープ> </ スタイル>

<！ - Father.vue - > 
< テンプレート> 
  < DIV > 
    < DIV >ここで父親の構成要素である</ DIV > 
    < DIV >サブアセンブリのパラメータを受信：fmsg {{}} </ DIV > 
    <！ - 2。 「受信」は関数名ですが、同じ名前のサブアセンブリのトリガ機能に合わせてカスタマイズすることができ、サブアセンブリに対応する機能、に結合している- > 
    < 子@receive =「fromChild」> </ 子> 
  </ DIV > 
</ テンプレート> 
< スクリプト> 
  子どもからインポート」。/子" 。
  エクスポートデフォルト{ 
    データ（）{ 
      リターン{ 
        fmsg：'' 
      ;} 
    }、
    メソッド：{ 
      // 受信サブアセンブリのパラメータ割り付け
      fromChild（データ）{
         この.fmsg = データ; 
      } 
    }、
    コンポーネント：{ 
      子
    } 
  }; 
< / スクリプト> 
< スタイルはスコープ> </ スタイル>

ページのレンダリング下のボタンをクリックしてください

第二に、パラメータは、ルート（クエリとのparams）との間で渡さ

クエリとparmasほぼ同じ方法を使用して、ここでは簡単にルーティングコンフィギュレーション、および呼び出しがパラメータを渡します

2.1params、urlパラメータ表示

VUE-cliの共通パラメータ渡しモード

おすすめ