1.newインスタンスルートディレクトリのデータは、他のコンポーネントは、いつでもアクセスすることができますが、推奨されていません
2.実施例ルートの方法によって計算された新たなアクセスデータ
main.js
// Vueが`import`コマンドでロードするようにバージョンをビルド
//（実行時のみ、またはスタンドアロン）の別名を持つwebpack.base.confに設定されています。
「VUE」からインポートVueの
「./App」からの輸入のApp
Vue.config.productionTip =偽
/ * eslint-無効無新しい* /
新しいヴュー（{
EL '#app'、
データ：{MSG： "vue.root"}、
コンポーネント：{アプリケーション}、
テンプレート： '<APP />'
}）
child.vue
<テンプレート>
<DIV CLASS = "子">
サブコンポーネント：
<UL>
<-Vリー= "友達の項目"の>アイテム{} {} </ LI>
</ UL>
{{タイトル}} - { {年齢}} --- {{ニック }} --- {{parentss}} <ボタン@クリック= "sendParent"タイプ= "ボタン"> 変化サブアセンブリコンポーネントは、親ボタン</ボタン>にデータを渡します
{{ }} gemsgInfo
</ div>
</テンプレート>
<スクリプト>
エクスポート{デフォルト
名：「子供」、
//小道具：[「タイトル」、「年齢」]、
小道具：{
タイトル：文字列、
年齢：ナンバー、
ニック：{
タイプ：文字列、
デフォルト：「ビッグ・ベイビー」
}、
parentss：{
タイプ：文字列、
必須：trueに
}、
友達：{
型：Array、
デフォルト：関数は（）{
"、 "大きな赤ちゃんが2ガールフレンド"、 "大きな赤ん坊が1ガールフレンド"、 "大きな赤ん坊のガールフレンド"[返します大きな赤ちゃんのガールフレンド。3「]
}
}
}、
データ（）{
リターン{
}
}、
メソッド：{
sendParent（）{
この$ EMIT（ "sendParentinfo"は、 "これは、サブアセンブリのデータである"）;.
}
}、
コンピュー：{
gemsgInfo（）{
。Root.msgこの$を返します
}
}
}
< /スクリプト>
<スタイルLANG = "CSSは"スコープ>
</スタイル>
3.操作原生dom
<テンプレート>
の<div> VUE。乐
<Pクラス= "" REF = "P1"> P元素</ P>
の<input type = "text" REF = "msginput">
<ボタン@クリック= "GETMSG"タイプ= "ボタン">取得</ボタン>
</ div>
</テンプレート>
<スクリプト>
輸出デフォルト{
名： "音楽"、
データ（）{
リターン{
}
}
）（{搭載
本$ refs.p1.innerHTML = "改变后元素P的"。
この$ refs.msginput.value = "MSG"
はconsole.log（この$のrefs.p1。）。
}、
メソッド：{
GETMSG（）{
にconsole.log（この$のrefs.msginput.value）
}
}
}
</ SCRIPT>
<スタイルのlang = "CSSは"スコープ>
</スタイル>