親コンポーネント：
< テンプレート>
< DIV クラス= "ボックス" >
< ヘッダ>
< DIV スロット= "左" >你好</ DIV >
< DIV スロット= "右" @click = "userFn" >你好</ DIV >
</ ヘッダー>
< divのクラス= "コンテンツ" >
< h1とREF = "タイトル" ID = "タイトル" >标题</ H1 >
< PREF = "DESC" ID = "DESC" >段落説明</ P >
< ボタン@click = "ます。getDOM" >取得DOMノード</ ボタン>
< のreftest REF = "テスト" />
< ボタン@click = "のgetData" >取得データの子要素</ ボタン>
</ DIV >
</ DIV >
</ テンプレート>
< スクリプト>
インポートヘッダーから"@ /ミックスイン/ヘッダー"
インポートのreftest ' @ /ミックスイン/ヘッダ'
エクスポートデフォルト{
[ヘッダ、のreftest]：ミックスイン
データ（）{
リターン{
メッセージ：' 父组件'
}
}、
メソッド：{
ます。getDOM（）{
にconsole.log（のdocument.getElementById （' タイトル' ））
はconsole.log（のdocument.getElementById（' DESC ' ））
はconsole.log（' ---------------------- ' ）
コンソール。ログ（この。$ refs.title）
console.log（この。$ refs.desc）
}、
のgetData（）{
この。$ refs.test.msg = ' 奶牛'
はconsole.log（この。$のrefs.test.msg）
}
}
}
</ スクリプト>
サブコンポーネント
< テンプレート>
< ヘッダクラス= "ヘッダ" >
< UL >
< 李>
< スロット名= "左" >左</ スロット>
</ 李>
< リチウム>
< スロット>中</ スロット>
</ 李>
< 李>
< スロット名= "右" >右</ スロット>
</ 李>
</UL >
</ ヘッダ>
</ テンプレート>
< スタイルのlang = "SCSS" >
.header {
幅：100％ 。
高さ：44px ;
背景色：＃F66 ;
マージン下：10pxの;
UL {
幅：100％ 。
高さ：100％;
表示：フレックス。
李{
幅：オート。
高さ：100％;
表示：フレックス。
正当化-コンテンツ：センター;
ALIGN-アイテム：センター;
＆：n番目の子（1）{
幅は50px 。
}
＆：n番目の子（2）{
フレックス：1 。
}
＆：n番目の子（3）{
幅：は50px 。
}
}
}
}
</ スタイル>
< テンプレート>
< divの>
< ボタン@click = "のgetData" >データの親要素へのサブアセンブリの直接アクセス</ ボタン>
</ DIV >
</ テンプレート>
< スクリプト>
エクスポートデフォルト{
データ（）{
リターン{
MSG：" -----------------------------チャイルド"
}
}、
メソッド：{
のgetData（）{
はconsole.log（この$親..メッセージ）
}
}
}
</スクリプト>
Header.js
インポートヘッダー'@ /コンポーネント/ヘッダー'
'@ /コンポーネント/のreftest'からインポートのreftest
{エクスポートデフォルト
：{コンポーネント
ヘッダ、
のreftest
}、
メソッド：{
userFn（）{
にconsole.log（ '个人中心'）
}
}
}