vue.js インスタンス オブジェクトとコンポーネント ツリー インスタンスの詳細な説明

この記事では主に vue.js インスタンス オブジェクト + コンポーネント ツリーの関連情報を紹介します。必要な方は参考にしていただければ幸いです。

vueのインスタンスオブジェクト

まず、jsの新しいキーワードを使用してvueをインスタンス化します

el: vueコンポーネントまたはオブジェクトがページ上でロードされる場所。ID、クラス、またはタグ名によってロードできます

template : ロードされたコンテンツ。命令または他のコンポーネントを含む HTML コード/HTML フラグメント。テンプレートは使用するテンプレートになります

**data:** データはデータを通じてコン​​ポーネントに導入されます

コンポーネント内のデータは関数の形式でデータを返す必要があります異なるインターフェースが同じコンポーネントを使用する場合、1 つのコンポーネントの値が変更され、他のページのコンテンツが変更されるとは考えられません。

{{ }} データ変数を二重括弧構文に入れます

コンポーネント登録構文のシュガー

グローバルコンポーネント

メソッド:

Vue.extend() メソッドを呼び出してコンポーネントコンストラクターを作成します

Vueを呼び出す .component(コンポーネントラベル、コンポーネントコンストラクター)メソッドでコンポーネントを登録します

コンポーネントはVueインスタンスのスコープ内でのみ使用できます

/*A方法全局组件1:*/
//1.Vue.extend() 创建组件构造器
var mycomponent = Vue.extend({
 /*组件内容*/
 template:…… ,
 data: ……
})
//2.Vue.component注册组件
Vue.component('my-component1', mycomponent);

Bメソッド(Aメソッドと同じ、簡単な書き方です) ):

Aメソッドはありません 最初のステップは、Vue.component(ラベル名、オプションオブジェクト)メソッドを直接呼び出すことです

/*B方法 全局组件2:*/
Vue.component('my-component2', {
  /*组件内容*/
 template:…… ,
 data: ……
}
/*在html中的组件调用，把组件标签直接用在html中相应的位置即可*/
<mycomponent1></mycomponent1>
<mycomponent2></mycomponent2>

ローカルコンポーネントはコンポーネント属性を使用します

"javascript
var partcomponent2 = {
el:…… ,
data: { …… }
}
new Vue({
el: '#app',
data: {
……
},
components: {
/* A方法： 局部组件1 /
'part-component1': partcomponent1
}，
/B方法 局部组件2 */
'part-component2':{
el:…… ,
data: { …… }
}
})
"

サブコンポーネント

作成方法は次のようになります上記 2 つの方法の違いは、位置がコンポーネント内部に配置されることです。

var compentChild ={
  el:……,
  data:……
}
component: {
  el: ……,
  data: {……}
  components: {
   'component-child': componentChild
  }
}

組み込みコンポーネント

コンポーネント内でコンポーネントを宣言する必要はありません。代わりに、タグを直接使用してください。たとえば、以下に示すように myHeader で組み込みコンポーネントを使用する場合、root-view、keep-alived なども Vue 自体によって提供される組み込みコンポーネントです。

 var myHeader = {
   template: '<component></component> <root-view></rooot-view>'
 }

関連する推奨事項:

vue.js 子コンポーネントを呼び出す親コンポーネントの内部メソッドの共有

Vue.js コンポーネント通信の例の共有

Vue.js_vue の *.Vue ファイルの最初の紹介。 js

以上がvue.js インスタンス オブジェクトとコンポーネント ツリー インスタンスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。