vue常用Api整理4

vue常用Api整理4
1.グローバル構成
グローバル構成はVue.configで、アプリケーションを開始する前に構成する必要があります.

    import Vue from 'vue';

    Vue.config.silent = false;

    new Vue({
        ...
    })

silent:true|false Vueすべてのログと警告

をキャンセル

devtools:true|false vue-devtoolsチェックコードを許可するかどうか、開発バージョンはデフォルトtrue、生産バージョンはデフォルトfalseです.本番バージョンをtrueに設定すると、チェックを有効にできます.

keyCodes:{f1: 112} v-onカスタムキーボードイベントへのキー名修飾子

productionTip:true|false vue起動時のプロンプト

を表示またはブロックする.
2.グローバルAPI
1. Vue.extend({})
パラメータはコンポーネントの構成オブジェクトであり、結果はクラスであり、このクラスをインスタンス化してVueコンポーネントを作成します.

    const config = {
       template: '
{{text}}
',
       data() {
          return {
             text: 'this is text'
          };
       }
    };

    //      
    const Child = Vue.extend(config);
    const child = new Child();

    //          
    child.$mount('#app');

2. Vue.set(traget, key, value)
オブジェクトのプロパティを設定します.応答式の場合、作成後も応答式であることを確認します.ターゲットオブジェクトはVueインスタンスまたはVueインスタンスのルートデータオブジェクトではありません.

    var vm=new Vue({
        el:'#app',
        data:{
            // info      
            info:{
                name:'  ';
            }
        }
    });

    //  info        
    Vue.set(vm.info,'sex',' ');

3. Vue.delete(target, key)
オブジェクトのプロパティを削除します.応答式の場合は、削除が更新ビューをトリガーできることを確認します.

    var vm=new Vue({
        el:'#app',
        data:{
            info:{
                name:'  ';
            }
        }
    });

    //    info   name   
    Vue.delete(vm.info, 'name');

4. Vue.component(id, [definition])
グローバルコンポーネントの登録または取得

    //     ，           
    Vue.component('my-component', Vue.extend({}))

    //     ，         (     Vue.extend)
    Vue.component('my-component', {tempalte: '
', ...})

    //         (       )
    var MyComponent = Vue.component('my-component')

5. Vue.use(plugin)

安装 Vue 插件, 插件需要提供 install 方法

    Vue.use(Vuex);

3.インスタンスのプロパティとメソッド
Vueインスタンスは、インスタンスの作成時にコンフィギュレーションオブジェクトに書き、インスタンスの作成後に接頭辞$を追加した後のプロパティ名で呼び出すことで、ユーザー定義のプロパティ(data、propなど)と区別できるいくつかの有用なインスタンスプロパティと方法を暴露します.
1. vm.$parent
親インスタンス、現在のインスタンスがある場合.
2. vm.$root
現在のコンポーネントツリーのルートVueインスタンス.
3. vm.$children
現在のインスタンスの直接サブアセンブリ
4. vm.slots
スロットによって配布されたコンテンツへのアクセス(サブアセンブリで挿入されたコンテンツを取得)
5. vm.$refs
refに登録されているすべてのサブコンポーネントを持つオブジェクト.(親コンポーネントの子コンポーネントの設定)
6. vm.$attrs
親役割ドメインではpropsとみなされない(および予期されない)特性バインド(classおよびstyleを除く)が含まれています.1つのコンポーネントがpropsを宣言していない場合、ここにはすべての親役割ドメインのバインド(classとstyleを除く)が含まれ、v-bind="$attrs"を使用して内部コンポーネント(サブコンポーネントで呼び出され、親コンポーネントがprops属性で宣言されていない属性を得ることができます)に転送されます.
7. vm.$on(event, callback)
現在のインスタンス(on()を呼び出すオブジェクト)上のカスタムイベントをリスニングします.イベントはvm.Emitトリガ.コールバック関数は、すべての受信イベントトリガ関数の追加パラメータを受信します.(同じイベントをリスニングし、複数の処理を行うことができるイベントリスニング関数です)

    vm.on('test', function (data) {})

8. vm.$emit(event, [..args])
現在のインスタンスのイベントがトリガーされ、追加のパラメータがリスナーコールバックに渡されます.

    vm.$emit('test', 'this is data');

コンポーネント通信部の詳細な使用
9. vm.$once(event, callback)
vm.$on()は、カスタムイベントをリスニングしますが、一度だけトリガーし、最初のトリガー後にリスナーを削除します.
10. vm.$off([event, callback])
カスタムイベントリスナーを削除します.

パラメータが指定されていない場合、すべてのイベントリスナーが除去される.

イベントのみが提供されている場合、そのイベントのすべてのリスナーが除去される.

イベントとコールバックが同時に提供される場合、このコールバックのリスナーのみが除去される.

11. vm.$mount()
Vueインスタンスがインスタンス化時にelオプションを受信していない場合、関連するDOM要素はありません.vm.$を使用できます.mount()は、未マウントのインスタンスを手動でマウントする.パラメータはdomまたはセレクタです

    const component = new MyComponent().$mount('#app');

12. vm.$forceUpdate()
Vueインスタンスを再レンダリングします.ただし、すべてのサブアセンブリではなく、インスタンス自体とスロットの内容を挿入するサブアセンブリにのみ影響します.
13. vm.$nextTick(callback)
コールバックは、次回のDOM更新サイクル後に実行されます.データを変更した直後に使用し、DOMの更新を待ちます.
14. vm.$destroy()
インスタンスを完全に破棄します.他のインスタンスとの接続をクリーンアップし、すべてのコマンドとイベントリスナーをバインド解除します.beforeDestroyとdestroyedのフックをトリガーします.
4.コンポーネント間通信
1.親コンポーネントから子コンポーネントへのデータの転送
コンポーネントインスタンスの役割ドメインは孤立しています.これは、サブコンポーネントのテンプレート内で親コンポーネントのデータを直接参照できないことを意味します.親コンポーネントのデータはpropによってサブコンポーネントに送信され、サブコンポーネントはpropsオプションを使用して予想されるデータを明示的に宣言する必要があります.

    
    <template>
    <div class="home-basic-container" >
        
        <child :parentName="parentName">child>
        
        <child v-bind="$data">child>
        
        <child v-bind="{name: parentName, age: parentAge}">child>
    div>
    template>

    
    <template>
    <div class="child-container">
        
       {{parentName}}
    div>
    template>

    <script>
    export default {
        name: 'HomeBasic',
        props: ['parentName'] //           
    };
    script>

注意:

propは一方向であり、親コンポーネントの変化はサブコンポーネントに伝達されるが、子コンポーネントの変化は親コンポーネントのデータ

を変更しない.

サブコンポーネントが受け取るpropは親コンポーネントのみで変更でき、サブコンポーネント内部ではprop

の変更は許可されない.
比較:reactの親コンポーネントがサブコンポーネントにデータを渡す方法と似ています.
2.子コンポーネントから親コンポーネントへの情報の伝達
親コンポーネントは、サブコンポーネントを使用する場所で、サブコンポーネントによってトリガーされたイベントを直接v-onで傍受し、イベントコールバックでサブコンポーネントからのデータを処理することができる.
サブアセンブリの内部では、this.$emit(event, [...args])を使用してイベントをトリガーできます.

    
    <child v-bind="$data" v-on:changeName="handleNameChange">child>

    //    
    data() {
        return {
            parentName: 'parent name',
            parentAge: 80
        };
    },
    methods: {
        handleNameChange(newName) {
            this.parentName = newName;
        }
    },

    
    <input @input="handleChange" />

    methods: {
      handleChange(e) {
         const newName = e.target.value;

         this.$emit('changeName', newName);
      }
    },

比較:

react中性子コンポーネントが親コンポーネントにデータを渡すと、ステータスを更新するために親コンポーネントに関数を定義します.この関数を通常のpropのようにサブコンポーネントに入力します.サブコンポーネントはこの関数を呼び出し、パラメータを入力します.親コンポーネントは、対応するデータ更新を行います.

実測では、vueではこのような操作も目的を達成することができるが、政府は上記のように別のカスタムイベントを提供している.

3.親アセンブリでのサブアセンブリの直接使用
サブコンポーネントにrefプロパティを追加し、使用する場所でrefプロパティ名でサブコンポーネントのインスタンスを取得できます.

    
    <Child ref="child">Child>

    method: {
        some() {
            this.$refs.child.doSomeThing();
        }
    }

比較:reactには同じ方法があります.
4.サブアセンブリで親コンポーネントを直接使用する
親コンポーネントのインスタンスは、サブアセンブリでthis.$parentを介して直接取得できます.

    method: {
        some() {
            console.log(this.$parent);
        }
    }

5.親子以外のコンポーネント間通信

両構成要素が同一の親構成要素を有する場合(推奨されない方法)

    
    <child v-bind="$data" ref="child">child>
    <Test v-on:changeName="handleChange">Test>

    //                      
    handleChange(newName) {
        this.$refs.child.changeName(newName);
    }

    //          Test
    handleChange() {
        this.$emit('changeName', 'this is newName');
    }

    //          Child
    changeName(newName) {
        this.showName = newName;
     }

2つのコンポーネント間で直接連絡がない場合(推奨)

    //               
    const bus = new Vue();

    //    A      
    bus.$emit('event', [...args]);

    //    B      （       ）
    bus.$on('event', function () {});

5.スロットを使用してコンテンツを配布
コンポーネントを組み合わせるには、親コンポーネントのコンテンツとサブコンポーネントの独自のテンプレートを混合する方法が必要です.このプロセスは、コンテンツ配信と呼ばれ、Vueでは要素を元のコンテンツのスロットとして使用します.
親コンポーネントテンプレートの内容は、親コンポーネントの役割ドメイン内でコンパイルされます.サブコンポーネントテンプレートの内容は、サブコンポーネントの役割ドメイン内でコンパイルされます.
1.単一スロット
サブアセンブリには、親アセンブリに追加されたコンテンツフラグメントを表すソケットが含まれています.サブアセンブリに表示する場所は、サブアセンブリのラベルに、親アセンブリの受信フラグメントが空の場合の表示内容を示す内容が表示されます.

    <div>
      <h2>        h2>
      <slot>
                        。
      slot>
    div>

    
    <div>
      <h1>        h1>
      <my-component>
        <p>        p>
        <p>         p>
      my-component>
    div>

    
    <div>
      <h1>        h1>
      <div>
        <h2>        h2>
        <p>        p>
        <p>         p>
      div>
    div>

2.名前付きスロット
名前付きスロットは、親コンポーネントからのコンテンツのサブコンポーネント内の位置を割り当てるために使用することができ、には、スロットの名前をマークするためのnameプロパティがあり、親コンポーネントからのクリップにはslotのプロパティがあり、名前付きスロットの名前に値し、対応する名前付きスロットにクリップが挿入されます.

    
    <Test v-on:changeName="handleChange">
        <p slot="a">parentName is {{parentName}}p>
        <p>parentName is {{parentName}}p>
        <p slot="b">parentName is {{parentName}}p>
    Test>

    
    <slot name="a">
         a      
    slot>
    <button @click="handleChange">Buttonbutton>
    <slot>
          ，       slot            
              slot           ，    
    slot>

3.スコープスロット
アクティブドメインスロットを使用すると、親コンポーネントの挿入クリップでサブコンポーネントの対応するスロットからのデータを使用できます.

    
    <slot child-info="this is child info">slot>

    
    <child>
        <template slot-scope="props">
            <p>{{props.childInfo}}p>
        template>
    child>

注意:

役割ドメインスロットは、名前付きでも非名前付きでもよい

である.

vue 2.5以前のバージョンはscope 2.5以降のバージョンはslot-scope

は2.5.0+であり、slot-scopeは

に限定することなく任意の要素またはコンポーネントに使用することができる.
関連記事

vue-cli-webpackテンプレート構成全解析-1

vue-cli-webpackテンプレート構成全解析-

Vue常用Api整理1-コンポーネント属性と方法

vue常用Api整理2-ライフサイクル関数

vue常用Api整理3-指令

vue常用Api整理4

vue-router使用整理

vuex使用整理