VUE親コンポーネント及びサブアセンブリの共有同じ値、変化の親コンポーネントがサブアセンブリに経時的に変化してもよいが、サブアセンブリの変更は、親コンポーネント内の任意の時間で変化します

コンポーネントのコード//親
< テンプレート> 
  < divの> 
     < 入力V-モデル= "場所" /> 
     < ボタン@click = "updatePlace" >変更された入力内容</ ボタン> 
    < ホームChIL- ：場所= '・プレイス'   @onChange = "のonChange" ：幅= 'inputWidth' click.native @ = "changeNative" /> // @ click.nativeコンポーネントがネイティブのイベントにバインドされている
  </ DIV > 
</ テンプレート> 

< スクリプト>
以下からの輸入HomeChil " ./HomeChil' 
エクスポートデフォルト{ 
  名：" ホーム" 、
  データ（）{ 
      リターン{ 
          inputWidth：100 、
          場所：' の値入力ボックス' 
      } 
  }、
  コンポーネント：{ 
      HomeChil 
  }、
  メソッド：{ 
      updatePlace（ヴァル）{ 
          この.place = ' 親コンポーネントは、コンテンツの入力を変更' ;
           この.inputWidthは= この.inputWidth + 100 ; 
          
      }

     //の方法サブアセンブリに渡される、サブアセンブリは、コンポーネントが持っているこの方法の親を呼び出すことができる
      のonChange（ヴァル）{ 
          この.place = ヴァル
      }、
      changeNative（）{ 
          にconsole.log（' DD ' ）; 
      } 
  } 
}; 
</ スクリプト> 

< スタイル> 
</ スタイル>

//コードサブアセンブリを取得する
< テンプレート> 
  < divのスタイル=「国境：1pxのソリッドレッド」>

      <スパン>親構成部材の変化の値がIになるであろう場合：{{inputName}} </スパン> 

    < 入力Vモデル= "inputName" @change = "onChangeInput" ：スタイル= "スタイル" /> 
    < ボタン@click = "changeInput" >改变入力中的内容</ ボタン> 
  </ DIV > 
</ テンプレート> 

< スクリプト> 
輸出デフォルト{ 
  名：" HomeChil " 、
  小道具：{ 
      幅：数、
      場所：文字列、
  }、
  データ（）{ 
    リターン{ 
      inputName：この.place 
    }。
  }、
  計算された：{ 
      //动态添加样式
      スタイル（）{ 
          リターン{ 
              幅：この.width + ' ピクセル' 
          } 
      } 
  }、 
  （作成）{ 
  }、
  腕時計：{ 
    場所（ヴァル）{ 
      この.inputName = valの; 
    }、
    inputName（ヴァル）{ 
      この$（発する。" のonChange " 、ヴァル）を、
    } 
  }、
  メソッド：{ 

    changeInput（）{ 
      この.inputName =  "見つかったサブアセンブリの変更」; 
    } 
  } 
}; 
</ スクリプト> 

< スタイル> 
</ スタイル>

注意：

       可変コンポーネントに新しい変数に割り当て1.新たに設け、親コンポーネント値inputName上を通過：this.placeと、

       2.時々、送信されたデータは、直接死んで書かないではなく、親要素からの動的データは、その命令を動的に、小道具のV-バインド値をバインド見て、親コンポーネントサブアセンブリで聞くために使用することができます値は新しい変数に割り当てられ、値上を通過時刻データ変更親要素、またサブアセンブリに伝達されます。それはのonChangeメソッド呼び出しの親要素を変更したときinputNameリスニング時計付きサブアセンブリにおいて、親要素に変更された値は、値が代わりに親コンポーネントに割り当てられます