VUEと彼の息子の域成分の値$親、REF、$、参考文献

サブコンポーネント

1 <テンプレート>
 2      <DIV クラス = " 子" >
 3          <スロット名= ' meiyong ' > </スロット>
 4          <P>我是子组件哟{{NUM}}、{{TTTTT}}、{{ナイキ}} </ P>
 5          <スロット名= " 強い" > </スロット>
 6      </ div>
 7 </テンプレート>
 8 <スクリプト>
 9インポートUtilsのから ' @ / utilsのを/のutilsの'
10輸出デフォルト{
 11の      小道具：[ "TTTTT ' ' ナイキ' ]、
 12個の     データ（）{
 13          リターン{
 14              NUM："  " 
15          }
 16      }、
 17      （搭載）{
 18          // 传值给父组件
19          本 $ parent.runTime = Utils.formatDate。 （新しい日付（）、" YYYY-MM-DDのHH：MM：SS " ）;
20      }
 21      
22  }
 23 </スクリプト>
 24 <スタイルのlang = " SCSS "スコープ>
25      .child {
 26          高さ：5rem。
27          幅：100％。
28          バックグラウンドカラー：スカイブルー。
29          テキストベース整列：センター;
30          位置：相対。
31          P {
 32              高さ：30px;
33              幅：800ピクセル;
34              ディスプレイ：ブロック;
35              位置：絶対。
36              上部：0 。
37              底：0 。
38は              左：0;
39              右：0 ;
40              マージン：自動;
41              // 変換：（-50％、 - 50％）変換
42          } 
 43          .parent {
 44          色：greenyellow。
45          }
 46          .strong {
 47              位置：絶対。
48              底：0 。
49は              左：50重量％;
50              変換：移動X（ - 50％に）。
51              色：darkmagenta。
52         }
 53      }
 54 </スタイル>

親コンポーネント：

<テンプレート> 
    の<div> 
    < -息子に父- ！> 
        <TC：TTTTT = ' MongoDBの'  REF = " TTTTT "：=ナイキ' ナイキ' > 
            <V-スロットテンプレート：meiyong> 
                 の<H1 クラス = " 親" >コンテンツV-スロットは役に立たないのですか？ああ</ H1> 
            </テンプレート> 
            <テンプレートV-スロット：強い> 
                <h2のクラス = " 強い" >あなたは強いですか？？？ランタイム} {} {</ H2> 
            </テンプレート>
<スクリプト> 
インポートtestChild から ' @ /ビュー/ testChild ' 
エクスポートデフォルト{ 
    データ（）{ 
        リターン{ 
            TTTTT：' █子伝送値に█I親要素' 、
            MongoDBの：' 私はヨーヨー█をMongoDBの█ ' 、
            ナイキ：' ██████だけで行う' 、
            ランタイム：' ヌル' 
        } 
    }、
    マウントは（）{ 
        // NUM refの値を渡すために合格しないようにして
        、この。$ refs.ttttt.num = ' 1949' 
    }、
    成分：{ 
        TC：testChild 
    } 
}
 </ SCRIPT> 
<スタイルのlang = " SCSSは、"スコープ> 
   
</スタイル>

VUEと彼の息子の域成分の値$親、REF、$、参考文献

おすすめ