Vue グローバル コンポーネントの概要

今回は、vue グローバル コンポーネントの概要についてお届けします。vue グローバル コンポーネントの概要についての注意点は何ですか?実際の事例を見てみましょう。

データ駆動型とコンポーネント化は、vue.js の 2 つの最も重要な機能です。コンポーネント化とは、コードの再利用を容易にし、開発効率を向上させることです。 Vue コンポーネントを作成するには 4 つの一般的な方法があり、それぞれに独自の特性があり、さまざまなシナリオに適しています。

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

構造:

// 组件的注册 、
Vue.component( 'componentName', { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
// 组件的使用 
new Vue({ 
 el: '#app' 
})

script タグ内の Vue.component() を通じてグローバルコンポーネントを定義し、 new Vue() を通じてそのコンポーネントを ID アプリを使用して HTML ファイルに適用しますラベル内のインスタンス。

特徴:

<1> このメソッドで定義されたコンポーネントは、HTML ファイルの script タグで直接定義して使用できます。インスタンスの使用。プロジェクトが比較的単純な場合に適しています。

Vue.component() はコンポーネントが定義されるたびに再利用する必要があり、コンポーネント名を同じにすることはできません。

ウェルカムコンポーネント

2. ローカルコンポーネント

の構造:

// 构造组件对象 
const componentName = { 
 template: // 组件的html结构, 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
// 组件的使用 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

はscriptタグでコンポーネントオブジェクトを定義し、Vueインスタンスのcomponents属性を通じてコン​​ポーネントを登録して呼び出します。

特徴:

<1> グローバルに定義されたコンポーネントと同様に、コンポーネントは HTML ファイルの script タグ内で直接記述して使用できます。

<2> 登録された Vue インスタンスのみが使用できます。 in;

例:

Welcome コンポーネント

3. template タグを使用します

構造:

<template id="componnet"> 
 // 组件的html结构 
</template> 
// 全局组件的注册与使用 
Vue.component( 'componentName', { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
}) 
new Vue({ 
 el: '#app' 
}) 
// 局部组件的注册与使用 
const componentName = { 
 template: '#component', 
 data(){ 
 return{ 
  // 组件中的属性 
 } 
 }, 
 method: { 
 // 组件中的方法 
 } 
 ...... // 组件其他的属性和方法 
} 
new Vue({ 
 el: '#app', 
 components: { 
 // 组件注册、调用 
 componentName 
 } 
})

で、body タグ内のコンポーネントに HTML 構造を記述して使用しますスクリプトタグ内のグローバルコンポーネントとローカルコンポーネント。違いは、コンポーネントのテンプレート属性が id によって参照されることです。 特徴:

<1>jsファイルにはHTML構造コンテンツが含まれておらず、構造とロジックの分離が実現されています

例:

ウェルカムコンポーネント

4、単一ファイルコンポーネント

構造:

<template lang="html"> 
 // 组件中的html结构 
</template> 
<script> 
 //组件的逻辑 
 export default { 
 // 组件的属性和方法 
 } 
</script> 
<style lang="css" scoped> 
 // 组件的样式 
</style>

接尾辞 vue が付いたファイルを作成します。ファイル名はコンポーネント名です。このコンポーネントには、HTML 構造、JS ロジック、CSS スタイルの 3 つの部分が含まれており、それぞれ異なるタグに対応しています。コンポーネントを使用する場合は、インポートすることで使用できます。 特徴:

<1> コンポーネントは相互に影響せず、再利用可能であり、その HTML、CSS、JS は再利用可能です

<2> コンポーネントの構造とロジックは明確です。 ;

<3> 複数人による開発に適した、大規模で複雑なプロジェクトに適しています。 ！ ！テンプレートタグ内のすべてのタグは 1 つのタグで囲む必要があることに注意してください。そうしないとエラーが報告されます正しい書き方:

<template> 
 <p> 
 <p></p> 
 ...... 
 <p></p> 
 </p> 
</template>

間違った書き方:

<template> 
 <p></p> 
 <p></p> 
 ...... 
 <p></p> 
</template>

以降の方法はマスターできたと思いますこの記事の事例を読んで、さらに php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

vue2.0操作がアクティブであり、他のオプションは相互に排他的です

vuexページが更新された後にデータを保存できない場合の対処方法

以上がVue グローバル コンポーネントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。