Vueコンポーネントのパッケージ化のプロセス

vue组件的定义

コンポーネントはVue.jsの最も強力な機能の1つです
コンポーネントはHTML要素を拡張して再利用可能なコードをカプセル化できます
高レベルでは、コンポーネントはカスタム要素であり、Vue.jsコンパイラは特別な関数を追加します
場合によっては、コンポーネントは `js`機能で拡張されたネイティブHTML要素を表すこともできます
すべてのコンポーネントもVue Vueインスタンスであり、同じオプションオブジェクト（一部のルートレベル固有のオプションを除く）を受け入れ、同じライフサイクルフック機能を提供することが可能です

vue组件的功能

ページを複数の比較的独立したモジュールに抽象化する機能
コードの再利用を実現し、開発効率とコード品質を向上させ、コードの保守を容易にする

Vue组件封装过程

まず、Vue.extend（）を使用してコンポーネントを作成します
次に、Vue.component（）メソッドを使用してコンポーネントを登録します
次に、子コンポーネントがデータを必要とする場合、小道具の定義を受け入れることができます
最後に、子コンポーネントがデータを変更した後、データを親コンポーネントに渡したい場合は、emit（）メソッドを使用できます。

组件使用流程详细介绍

1.コンポーネントの作成-3つのメソッドがあります。extend（）
<template id = ''>
<script type = 'text / x-template' id = ''>

A. Vue.extend（）を呼び出してmyComという名前のコンポーネントを作成します。テンプレートはテンプレートのラベルを定義し、テンプレートのコンテンツはラベルの下に書き込む必要があります


var myCom = Vue.extend({
    template: '<div>这是我的组件</div>'
})

B.ラベルを作成するには、id属性を追加する必要があります
```
<template id="myCom">
    <div>这是template标签构建的组件</div>
</template>
```
C. <スクリプトタイプは、=「テキスト/ X-テンプレート」idは=「MYCOM」>、
id属性を追加する必要があり、また、追加する必要があるタイプ=「テキスト/ X-テンプレートを」、
これはコンパイルを実行していないブラウザを伝えることです追加しますコード
```
<script type="text/x-template" id="myCom1">
    <div>这是script标签构建的组件</div>
</script>
```
2.コンポーネントの登録-グローバル登録、ローカル登録の2つの方法があります
A1。グローバル登録：1つの登録（Vue.component（コンポーネント名、コンポーネントの作成時に定義された変数）を呼び出します）で、複数のVueインスタンスで使用できます。

最初にグローバル登録を使用して、上記の例で作成されたmyComコンポーネントを登録します

Vue.component('my-com',myCom)

A2。グローバル登録の構文シュガー：直接登録を作成する必要はありません

Vue.component('my-com',{
    'template':'<div>这是我的组件</div>'
})

'my-com'は、コンポーネントのカスタム名であり、使用時に使用されます。myComは、上記で作成したコンポーネント変数に対応しています。

A3。テンプレートタグとスクリプトタグで構築されたコンポーネントの場合、2番目のパラメーターはタグのid値に変更されます

Vue.component('my-com',{
    template: '#myCom'
})

B1。部分登録：コンポーネントが登録されている場合にのみ使用できます。1回の登録と1回の使用です。

var app = new Vue({
    el: '#app',
    components: {
        'my-com': myCom
    }
})

B2。部分的な登録構文糖：

var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '<div>这是我的组件</div>'
        }
    }
})

B3、<template>および<script>によって作成されたコンポーネント、部分登録

var app = new Vue({
    el: '#app',
    components: {
        'my-com': {
           template: '#myCom'
        }
    }
})

3、调用组件

コンポーネントが呼び出されるコンポーネント名のラベルを書くだけです

<div>
    /*调用组件*/
    <my-com></my-com>
</div>

案例：

A.グローバル登録：新しいhtmlファイルを作成し、vue.jsをインポートして、2つのVueインスタンスapp1とapp2を定義します

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app1">
        <my-com></my-com>
    </div>
    <div id="app2">
        <my-com></my-com>
    </div>
 
    <script>
        /*创建组件*/
        var myCom = Vue.extend({
       
       
            template: '<div>这是我的组件</div>'
        });
        /*全局注册组件*/
        Vue.component('my-com',myCom);
 
        /*定义vue实例app1*/
        var app1 = new Vue({
       
       
            el: '#app1'
        });
 
        /*定义vue实例app2*/
        var app2 = new Vue({
       
       
            el: '#app2'
        });
    </script>
</body>
</html>

显示效果：

ここに画像の説明を挿入

Vueコンポーネントのパッケージ化のプロセス

Vueコンポーネントのパッケージ化のプロセス

おすすめ