vue コンポーネントを使用する基本的な方法は何ですか?

今回は、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>
 <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 の 要素に特別な is 属性を追加することで実現できます。

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component></component>

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
 <component></component>
</keep-alive>

可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素，诸如

、

、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. 、
和 ，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

 

这个自定义组件 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

如何使用vue裁切预览组件


怎样使用JS+AJAX做出三级联动

以上がvue コンポーネントを使用する基本的な方法は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。