12.活性な親成分データ収集方法及びサブアセンブリ

アクティブな親コンポーネントのデータ取得方法およびサブアセンブリ

1.親コンポーネントのHome.vue

< テンプレート> 
    < divの> 
        < H2 > {{MSG}} </ H2 > 
        <！ - 時間1.通話がサブアセンブリのREFを呼び出します- > 
        <！ - 親コンポーネント内の2本$、参考文献によります。 ... .headerデータこの$のrefs.headerメソッド呼び出しのデータとメソッドのサブアセンブリ- > 
        <！ - 最初のステップは、REF、第2のステップは、参考文献であることに注意してください> - 
        < V-ヘッダREF =「ヘッダ" > </ V-ヘッダ> 
        < ボタン@click ="のgetData（） " >取得データサブアセンブリ</ ボタン> 
        < ボタン@click ="のgetFunction（）」>サブアセンブリ得る方法</をボタン> 
    </ DIV > 
</ テンプレート> 
< スクリプト> 
からインポートヘッダー" ./Header.vue " 。
輸出のデフォルト{ 
  名：' ホーム' 、   
  データ（）{ 
    リターン{ 
        MSG：' 首页组件' 、
    } 
  }、
  メソッド：{ 
    のgetData（）{ 
      警告（これます$ refs.header.msg）
    }、
    のgetFunction（）{ 
      この。$のrefs.header.run（）
    } 
  }、
  成分：{ 
    ' V-ヘッダ' ：ヘッダ
  } 
} 
</ スクリプト> 
< スタイルのlang = "SCSS" スコープ> 
H2 { 
    色：赤。
} 
</ スタイル>

2.サブアセンブリHeader.vue

< テンプレート> 
    < divの> 
        < H2 > {{MSG}} </ H2 > 
    </ DIV > 
</ テンプレート> 
< スクリプト> 
輸出デフォルト{ 
  名：' ヘッダー' 、   
  データ（）{ 
    リターン{ 
        MSG：" 头部组件' 
        タイトル：' 子组件' 
    } 
  }、
  メソッド：{ 
      ラン（）{ 
          アラート（'サブアセンブリは、メソッドを実行します' ）
      } 
  } 
} 
</ スクリプト> 
< スタイルのlang = "SCSS" スコープ> 
H2 { 
    色：緑。
} 
</ スタイル>