今回は、vueコンポーネントの基本的な使い方と、vueコンポーネントを使用する際の注意点についてお届けします。以下は実際のケースですので、見ていきましょう。
コンポーネントとは
コンポーネントは、データとメソッドを単純にカプセル化したものです。 Web 上のコンポーネントは、実際にはページのコンポーネントとみなすことができ、独立したロジックと機能を備えたインターフェイスであると同時に、指定されたインターフェイス規則に従って相互に統合され、最終的に完成します。アプリケーションは、ナビゲーション、リスト、ポップアップ ウィンドウ、ドロップダウン メニューなどのコンポーネントで構成されます。このページは、コンポーネントを自由に組み合わせて、完全に機能するインターフェイスを形成することができます。コンポーネントが不要になった場合、またはコンポーネントを置き換えたい場合は、コンポーネントの動作に影響を与えることなく、いつでも置き換えたり削除したりできます。アプリケーション全体。 , フロントエンドのコンポーネント化の中心的な考え方は、巨大で複雑なものを適度な粒度で小さなものに分割することです。
開発効率の向上、再利用の促進、デバッグ手順の簡素化、プロジェクト全体の保守性の向上、共同開発の促進に使用します。
軽量のフロントエンド フレームワークとしての vue の中核はコンポーネント開発です。
コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素として表示されることもあります。
vue では、コンポーネントは再利用可能な Vue インスタンスです。コンポーネントは再利用可能な Vue インスタンスであるため、データ、計算済み、監視、メソッド、ライフサイクルフックなど、新しい Vue と同じオプションを受け取ります。唯一の例外は、el などのルート インスタンス固有のオプションです。
コンポーネントの登録
グローバル登録
Vue.component を通じてコンポーネントを作成します:
Vue.component('my-component-name', {
// ... 选项 ...
})これらのコンポーネントはグローバルに登録されます。つまり、登録後に新しく作成された Vue ルート インスタンス (新しい Vue) のテンプレートで使用できます。例:
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<p id="app">
<component-a></component-a>
<component-b></component-b>
<component-c></component-c>
</p>これはすべてのサブコンポーネントに当てはまります。つまり、これら 3 つのコンポーネントは内部的に相互に使用することもできます。
部分的な登録
グローバルな登録は、多くの場合理想的ではありません。たとえば、webpack のようなビルド システムを使用する場合、すべてのコンポーネントをグローバルに登録すると、コンポーネントを使用しなくなった場合でも、そのコンポーネントは最終的なビルド結果に含まれることになります。その結果、ユーザーがダウンロードする JavaScript の量が不必要に増加します。
これらの場合、プレーンな JavaScript オブジェクトを使用して コンポーネントを定義することができます:
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }次に、コンポーネント オプションで使用するコンポーネントを定義します:
new Vue({
el: '#app'
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
}) コンポーネント オブジェクトの各プロパティの属性名は次のとおりです。カスタム要素の名前とその属性値は、このコンポーネントのオプション オブジェクトです。
ローカルに登録されたコンポーネントは、その子コンポーネントでは使用できないことに注意してください。たとえば、ComponentA を ComponentB で使用できるようにしたい場合は、次のように記述する必要があります。実際には ComponentA: ComponentA の略称、つまりこの変数名も次のとおりです:
テンプレートで使用されるカスタム要素の名前このコンポーネント オプションの変数名が含まれます
基本コンポーネントの自動グローバル登録を行いました分かりませんよ。
データは関数である必要があります
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}このように定義されたデータ内の変数は、コンポーネントを使用する場合、1 つのコンポーネントの変数の値を変更すると、すべてのコンポーネントの変数の値に影響します。変数の干渉を避けるために、コンポーネントのデータ オプションは関数である必要があり、各インスタンスは返されたオブジェクトの独立したコピーを維持できます:
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}異なるコンポーネント間を動的に切り替えるのに非常に便利です。たとえば、 、マルチタブ インターフェイスの場合:
上記は、Vue の
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component>
你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive>
可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/
dom标签内使用组件
有些 HTML 元素，诸如