Vueの親子組立方法相互

ロングったらしい、ドライ話せない、私たちはしばしば、あなたが親コンポーネントサブアセンブリまたはサブアセンブリの方法は、メソッドの親コンポーネントは、いくつかの結論を行うことです呼び出す必要がある者に連絡する必要がある場合には遭遇VUEの開発プロセスは、私が手助けをしたいです。

親コンポーネントサブアセンブリのメソッドを呼び出します。

1.設定サブアセンブリREF、によって、親コンポーネントthis.$refs.xxx.method_name(data)调用子组件方法，data参数可选

親コンポーネント：

<テンプレート> 
  の<div> 
　　<H1>我是父组件</ H1> 
    <子REF = "childname"> </子> 
  </ div> 
</テンプレート> 
の<script> 
  からの輸入子供 '〜/コンポーネント/子供; 
  輸出デフォルト{ 
    コンポーネント：{ 
      子
    }、
    メソッド：{ 
      fatherMethod（データ）
        これ。$ refs.childname.childMethod（データ）; 
        console.log（ '调用子组件方法' ）; 
      } 
    } 
  }。
</ SCRIPT>

サブコンポーネント：

<テンプレート> 
  の<div> 
    <H1の> Iサブアセンブリ<の/ H1>た
  </ div> 
</テンプレート> 
<SCRIPT> 
  エクスポートデフォルト{ 
    メソッド：{ 
      childMethod（データ）{ 
      　　にconsole.log（ 'Iサブアセンブリ法' 
      ） 
    } 
  } };
 </ SCRIPT>

親コンポーネントサブアセンブリのメソッドを呼び出します。

サブアセンブリ1. 本。$ Parent.eventの親コンポーネントを呼び出すメソッド、データはオプションです

親コンポーネント：

<テンプレート> 
  の<div>     
    私の親要素<のH1> <の/ H1> 
    <子ども> </託児> 
  </ div> 
</テンプレート> 
<スクリプト> 
  からインポート子供 '〜/コンポーネント/チャイルド' ; 
  輸出デフォルト{ 
    コンポーネント：{ 
      子供
    }、
    メソッド：{ 
      fatherMethod（データ）{ 
        にconsole.log（ '親要素法I' ）; 
      } 
    } 
  };
 </ SCRIPT>

サブコンポーネント：

<テンプレート> 
  の<div> 
    <H1>私は、サブコンポーネント</ H1>思い
    ます。</ button>の<クリック= "childMethod（データ）" @ボタン> 
  </ div> 
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    方法： { 
      childMethod（）{ 
        この$ parent.fatherMethod（データ）;. 
        はconsole.log（ 'コール親要素法' ）
      } 
    } 
  };
 </ SCRIPT>

使用されるサブアセンブリ2. $emit親成分へのトリガイベント、親コンポーネントは、このイベントをリッスンデータパラメータはオプション

親コンポーネント：

<テンプレート> 
  の<div>     
    <H1>我是父组件</ H1> 
    <子fatherMethod = "fatherMethod" @> </子> 
  </ div> 
</テンプレート> 
の<script> 
  からの輸入子供「〜/コンポーネント/子供" ; 
  エクスポートデフォルト{ 
    コンポーネント：{ 
      子
    }、
    メソッド：{ 
      fatherMethod（データ）{ 
        にconsole.log（ '我是父组件方法' ）。
      } 
    } 
  }。
</ SCRIPT>

サブコンポーネント：

<テンプレート> 
  の<div> 
    <H1>私は、サブコンポーネント</ H1>思い
    ます。</ button>の<クリック= "childMethod（データ）" @ボタン> 
  </ div> 
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    方法： { 
      childMethod（データ）{ 
       この $ EMIT（ 'fatherMethod' 、データ）
        はconsole.log（ 'コール親要素法' ）
      } 
    } 
  };
 </ SCRIPT>

3.によって親コンポーネント小道具受信サブアセンブリの方法は、直接にサブアセンブリは、このメソッドを呼び出すデータパラメータオプション

親コンポーネント：

<テンプレート> 
  の<div>     
    <H1>我是父组件</ H1> 
    <子：fatherMethod = "fatherMethod"> </子> 
  </ div> 
</テンプレート> 
の<script> 
  からの輸入子供「〜/コンポーネント/子供" ; 
  エクスポートデフォルト{ 
    コンポーネント：{ 
      子
    }、
    メソッド：{ 
      fatherMethod（データ）{ 
        にconsole.log（ '我是父组件方法' ）。
      } 
    } 
  }。
</ SCRIPT>

サブコンポーネント：

<テンプレート> 
  の<div> 
    <H1>私は、サブコンポーネント</ H1>思い
    ます。</ button>の<クリック= "childMethod（データ）" @ボタン> 
  </ div> 
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    小道具： { 
      fatherMethod：{ 
        タイプ：機能、
        デフォルト：NULL 
      } 
    }、
    メソッド：{ 
      childMethod（データ）{ 
        IF（この.fatherMethod）{
           この.fatherMethod（データ）
　　　　　　はconsole.log（ '親コンポーネントの呼転送方法'）
        }    
      } 
    } 
  };
 </ SCRIPT>

その他の呼び出し方法：

1.すべてのコンポーネントは、最終的には実際のDOM要素にレンダリングされます、またはそれは、JS jqueryのことDOM要素オブジェクト、メソッド、地元のクッキーによってトリガシミュレーションのクリックによって拘束要素、のlocalStorageを取得したり、達成するためのsessionStorageのキャッシュパラメータを行うことができますので値によって渡されました。この方法は、特殊なケースが推奨されていない、いない限り、同じページ上のコンポーネントを使用することができますよう、子どもの親コンポーネントに限定されるものではなく、彼らは仕様VUEを満たしていないので、

成分A：

<テンプレート> 
  の<div>     
    <H1の> I成分A <の/ H1> 
    <クリック= 'methodA（）' @ボタンのID = 'BTN'>ポイントI </ボタン> 
  </ div> 
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    メソッド：{ 
      methodA（）{ 
　　　　　VAR localStorage.getItemパラメータ=（ 'パラメータ' ）;  
        はconsole.log（ '組立Iの方法' ）; 
      } 
    } 
  };
 </ SCRIPT>

成分B：

<テンプレート> 
  の<div>     
    <H1の> I成分B </ H1の> 
    <ボタン@クリック= 'methodB（データ）'>ポイントI </ボタン> 
  </ div> 
</テンプレート> 
<スクリプト> 
  エクスポートデフォルト{ 
    メソッド：{ 
      methodB（データ）{ 
　　  　　localStorage.setItem（ 'パラメータ' 、データ）; 
       　$（ '#btn'）クリック（）;. // シミュレートボタンをクリックする 
       　にconsole.logを（ 'クリックボタン、トリガー組立方法Aをシミュレート' ） ; 
      } 
    } 
  };
 </ SCRIPT>

限られた容量は、一般的なレベルは、ミスは、注目のおかげで、私を修正し、コメントしてください！

おすすめ