一般的に使用される技術のVueの開発

1.ライフサイクル・リスナサブアセンブリ
例えば親コンポーネントは、いくつかの処理ロジックを実行するモニタに取り付けられたサブアセンブリを取り付ける場合、親コンポーネントとサブアセンブリの親子を有するルーチン、次のように書くことができます。

// Parent.vue 
<子@搭載= "doSth" /> 

//Child.vueは
{）（取り付けられ
　　、これを$（ '搭載'）を発します。
}

ここでは、次のように親コンポーネントサブアセンブリは、に耳を傾ける方法を@hookときだけ参照を使用し、何もすることなく、簡単な方法で、サブアセンブリを提供します：

// Parent.vue 
<子@hook：搭載= "doSth" /> 

方法：{ 
　　doSth（）{ 
　　　　//ここにいくつかのコード
　　} 
}

もちろん、あなたがここに聞くことができるだけで装着されていない場合、他のライフサイクルイベントはように更新され、作成された、例えば、監視することができます。

2.render機能
　　役割1.render機能：
　　Vueのは、ほとんどの場合、あなたのHTMLを作成することをお薦めします実用的なテンプレート、しかし、とき`level`の一つに記載の通り、長い、面倒だと思われるHTMLコードを作成するためのテンプレートを使用して、いくつかの特別なシーンタイトルを作成するための動的コンポーネントを支える、あなたが書くことだと思うかもしれません。

// Parent.vue 
<子供：レベル= "1">のHello World </託児> // Child.vue 
<テンプレート> 
　　の<div> 
　　　　<V- h1の場合 = "レベル=== 1"> 　　　　　　<スロット> </スロット> 
　　　　</ H1> 
　　　　<H2 V- なら = "レベル=== 2"> 
　　　　　　の<slot> </スロット> 　　　　</ H2> 
　　　　<H3 V- なら = "レベル=== 3"> 
　　　　　　の<slot> </スロット> 
　　　　</ H3> 
　　　　<H4 V- なら = "レベル=== 4"> 
　　　　　　の<slot> </スロット> 
　　　　</ H4> 
　　　　<H5 V- なら = "レベル=== 5"> 
　　　　　　の<slot> </スロット> 
　　　　</ H5> 
　　　　<H6 V- なら = "レベル=== 6">



　　　　　　<スロット> </スロット>
　　　　</ H6> 
 　　</ div> 
</テンプレート> 

<スクリプト> 
　　エクスポートデフォルト{ 
　　　　小道具：[ "レベル" ] 
　　}
 </ SCRIPT>

もちろん、ここで使用したテンプレートが不適切である、我々はレンダリング機能を書き換えるために、このアセンブリを見て

// Parent.vue 
<テンプレート> 
　　の<div> 
　　　　<子供：レベル=」1" > Hello Worldの</託児> 
　　</ div> 
</テンプレート> 
<スクリプト> 
　　エクスポートデフォルト{ 
　　　　コンポーネント：{ 
　　　　　　子：{ 
　　　　　　　　レンダリング（creatElement） { 
　　　　　　　　　　返すcreatElement（
　　　　　　　　　　　　 'H' + この .level、// タグ名
　　　　　　　　　　　　{ 
　　　　　　　　　　　　　　：{スタイル
　　　　　　　　　　　　　　　　色： '＃F60' 
　　　　　　　　　　　　　　} 
　　　　　　　　　　　　} // プロパティ]タブを
　　　　　　　　　　　　この .. $スロットデフォルト // 子配列
　　　　　　　　　　）
　　　　　　　　}、
　　　　　　　　小道具：{ 
　　　　　　　　　　レベル：{ 
　　　　　　　　　　　　必須：真、
　　　　　　　　　　　　タイプ：Number 
　　　　　　　　　　} 
　　　　　　　　} 
　　　　　　} 
　　　　} 
　　}
 </ SCRIPT>

　　関数の2.render戻り値：vノード（すなわち、仮想ノード）
　　パラメータ3.render関数は：のcreateElement
　　　のcreateElement自体は関数であり、3つのパラメータがあります：
　　　*ノードが作成される：（必須）{文字列|オブジェクト|関数} 、HTMLタグ名は、コンポーネントオブジェクトであってもよい作成されるべきであり、それは上記非同期関数のいずれかで解決することができる
　　　*タグ属性：（オプション）{オブジェクト}
　　　*子仮想ノード：（オプション） {文字列|アレイ}のcreateElement（から構成）は、文字列「テキスト仮想ノード」を生成するために使用することができます

一般的に使用される技術のVueの開発

おすすめ