Vue.jsシリーズのフロントエンドフレーム（9）：Vue.extend、新しいVueのでVue.component

このリンク： https://blog.csdn.net/zeping891103/article/details/78133622

VUE建設、これらの3つの成分のVUEのVUEの例、および異なる概念であり、彼らの関係は、Javaでの継承の概念に多少似ています。

関係：設定さVUE - > VUEのコンポーネント - > VUEの例

すなわち、異なるVUEのVUE成分は同じ構造を共有することができ、異なるインスタンスが同じVUEのVUEアセンブリを共有することが可能です。使用するJava開発は継承が非常に重要であることを知っている大規模なプロジェクトでは、フロントエンドは同じです。のは、それらの間の違いを実現するためのコードを見てみましょう

<スクリプト>
	// VUEの建設
	Vue.extend（{
		小道具：[]、
		データ：関数（）{
			リターン{}
		}、
		テンプレート： ""
 
	}）;
	
	// VUEコンポーネント
	Vue.component（ "MyComponentの"、{
		小道具：[]、
		データ：関数（）{
			リターン{}
		}、
		テンプレート： ""
	}）;
	
	// VUE例
	新しいビュー（{
		エル： ""、
		データ：{}
	}）;
</ SCRIPT>

上記のコードから分かるように、構造および構成VUE VUEコンポーネントに必要な初期化パラメータの一部は、VUEのVUEコンポーネントインスタンスを直接VUEコンポーネント初期設定自体、すなわち構造VUEをスキップすることができ意味し、同じです - > VUEの例では、APIは以下の3種類が違いです：

vue.extend

特徴：

1.だけで、独自の初期化構造を通じて

使用します。

負荷要素において

2参照コンポーネントのVueの一例です

3.Vue.componentコンポーネント参照

<DIV ID = "APP2"> </ div>
<スクリプト>
	VARリンゴ= Vue.extend（{
		テンプレート： "<P> Iコンストラクタが作成：独自のパラメータ：{{A}} |外部質量パラメータ：{{B}} </ P>"、
		データ：関数（）{
			{戻ります
				A： "A"
			}
		}、
		小道具：[ "B"]
	}）;
 
	//コンストラクタマウント
	新しいApple（{
		プロピレンのデータ：{
			B： 'Vue.extend'
		}
	。}）$マウント（ '＃のAPP2'）;
</ SCRIPT>

結果：

外部質量参加|：：Vue.extend独自のパラメータを：私は、コンストラクタが作成しています。

Vue.component

特徴：

1.デバイスの構造は、それ自体で初期化することができます

構造アセンブリを導入することによって初期化2. Vue.extend

3.サードパーティのテンプレートによって初期化モジュール構造をtemple.htmlことができます

使用します。

任意の内部要素は、VUEオフ初期化されています

<DIV ID = "APP3">
	<applecomponent V-バインド：B = "vparam"> </ applecomponent>
	<MyComponentのV-バインド：B = "vparam"> </ MyComponentの>
	<templecomponentのV-バインド：B = "vparam"> </ templecomponent>
</ div>
 
<スクリプト>
	// [1]の構造を導入
	Vue.component（ 'applecomponent'、りんご）;
	自分のメソッドを作成します// [2]
	Vue.component（ "MyComponentの"、{
		小道具：[ "B"]、
		データ：関数（）{
			{戻ります
				A： "A"
			}
		}、
		テンプレート： "<P>私は自分のパラメータを作成vue.component：{{A}} |外部質量パラメータ：{{B}} </ P>"
	}）;
	方法3は、サードパーティのテンプレートを導入//は、以前の記事を参照することができます
	Vue.component（ 'templecomponent'、関数（リゾルブ、リジェクト）{
		$に.get（ "./../のXTemplate / com.html"）。次いで、（関数（RES）{
			{（解決
				テンプレート：RES、
				小道具：[ "B"]、
				データ：関数（）{
					{戻ります
						A： "A"
					}
				}
			}）
		}）;
	}）;
	VaRのAPP3 =新しいビュー（{
		エル： "＃1 APP3"、
		データ：{
			vparam： "Vue.component"
		}
	}）;
</ SCRIPT>

結果：

私は、コンストラクタが作成しています：独自のパラメータ：|外部質量参加：Vue.component
外部質量参加|：：Vue.component私は自分のパラメータを作成vue.component
上院への外部|：：Vue.component私は、インポートテンプレートパラメータを所有します

新しいビュー

カスタムプロパティの値を表し、この。$のoptions.keyは、この。$ ??システムは、このような、属性値。$エル

特徴：

1は、独自の基準Vue.extendコンポーネントを介して設定することができ、独自の基準データを通過するように構成されています

2.アセンブリテンプレートは、独自のコンポーネントを介して参照することができ、自身のデータを介してコンポーネントにパラメータを渡します

使用します。

1.自分自身に限定します

<DIV ID = "APP1">
	<DT1> </ DT1>
	<vueapple V-バインド：B = "MSG"> </ vueapple>
</ div>
 
<スクリプトタイプ= "テキスト/ X-テンプレート" ID = "DT1">
	<DIV>ここでは、サブアセンブリ1 </ DIV>であります
</ SCRIPT>
 
<スクリプト>
	新しいビュー（{
		エル： "＃1 APP1"、
		データ：{
			MSG： "VUEインスタンス・パラメータ"
		}、
		成分：{
			DT1：{
				テンプレート： "＃1 DT1"
			}、
			vueapple：導入リンゴ// [建設]
		}
	}）;

</ SCRIPT>

結果：

これは、サブアセンブリ1
私は、コンストラクタが作成しています：独自のパラメータ：|外部質量参加：VUEインスタンスパラメータ