Vue.js コンポーネントの通信の問題について

前に書いてます

私は Vue.js に非常に興味があり、私が普段取り組んでいる技術スタックは Vue.js なので、過去数か月間、Vue.js のソース コードを勉強して研究することに時間を費やしました。まとめとアウトプットを行いました。

Vue コンポーネントとは何ですか?

コンポーネントは、Vue.js の最も強力な機能の 1 つです。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式を取ることもできます。

Vueコンポーネント間通信

親コンポーネントは子コンポーネントと通信します

方法1: props

propsを使用すると、親コンポーネントはpropsを使用して子コンポーネントにデータを渡すことができます。

親コンポーネントの vue テンプレート Father.vue

<template>
    <child :msg="message"></child>
</template>

<script>

import child from &#39;./child.vue&#39;;

export default {
    components: {
        child
    },
    data () {
        return {
            message: &#39;father message&#39;;
        }
    }
}
</script>

子コンポーネントの vue テンプレート child.vue

<template>
    <p>{{msg}}</p>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    }
}
</script>

方法 2 $children を使用する

$children を使用して、親コンポーネント内の子コンポーネントにアクセスします。

子コンポーネントは親コンポーネントと通信します

方法 1: vue イベントを使用する

親コンポーネントはイベント メソッドを子コンポーネントに渡し、子コンポーネントは $emit を通じてイベントをトリガーし、親コンポーネントにコールバックします。

親コンポーネントの Vue テンプレート Father.vue

<template>
    <child @msgFunc="func"></child>
</template>

<script>

import child from &#39;./child.vue&#39;;

export default {
    components: {
        child
    },
    methods: {
        func (msg) {
            console.log(msg);
        }
    }
}
</script>

子コンポーネントの Vue テンプレート child.vue

<template>
    <button @click="handleClick">点我</button>
</template>

<script>
export default {
    props: {
        msg: {
            type: String,
            required: true
        }
    },
    methods () {
        handleClick () {
            //........
            this.$emit(&#39;msgFunc&#39;);
        }
    }
}
</script>

方法 2: 親コンポーネントによって渡された props を変更して、親コンポーネントのデータを変更します

このメソッドは、への参照のみを渡すことができます。親コンポーネント 変数を使用する場合に使用できますが、リテラル変数では対応する効果を得ることができません。飲酒変数は、親コンポーネント内のデータであっても、子コンポーネントによって取得された props 内のデータであっても、最終的には同じメモリ アドレスを指すため、子コンポーネント内の props 内のデータを変更すると、親コンポーネント内のデータも変更されます。成分。

ただし、変更を表示するためにデータを使用する場合は、props の値を直接変更することはお勧めできません。実際の開発では、それをデータに入れて親コンポーネントに返すことがよくあります。次に、イベントを使用してデータを返します。これにより、コンポーネントの独立性と分離性が維持され、同じデータの使用による異常なデータ フローの混乱が発生せず、データを変更するために特定のインターフェイスを介してのみデータが送信され、内部データのステータスは専用のデータによって管理されます。

方法 3: $parent を使用する

$parent を使用して、親コンポーネントのデータにアクセスします。

非親子コンポーネントと兄弟コンポーネント間のデータ転送

非親子コンポーネント通信の場合、Vue は Vue インスタンスを中央イベント バスとして使用することを公式に推奨しています。

Vue には内部イベント機構があり、ソースコードを参照できます。

$on メソッドはイベントをリッスンするために使用されます。

$emit はイベントをトリガーするために使用されます。

/*新建一个Vue实例作为中央事件总嫌*/
let event = new Vue();

/*监听事件*/
event.$on('eventName', (val) => {
    //......do something
});

/*触发事件*/
event.$emit('eventName', 'this is a message.');

マルチレベルの親子コンポーネント通信:

Vue1.0 では、子コンポーネント (または親コンポーネント) にブロードキャスト (またはディスパッチ) するための 2 つのメソッド $broadcast と $dispatch が実装されています。イベントがリッスンされて true が返されると、イベントは引き続き孫レベルのコンポーネントにブロードキャスト (またはディスパッチ) されます。ただし、このメソッドは Vue2.0 では削除されました。

Ele.meのオープンソースのコンポーネントライブラリ要素を勉強していたら、ブロードキャストメソッドとディスパッチメソッドが再実装され、ミックスインの形で導入されていることが分かりました。詳しくは「要素コンポーネントライブラリのブロードキャストについての話」を参照してください。そして派遣」。ただし、Vue1.0 の 2 つのメソッド実装とは少し異なります。これら 2 つのメソッドは、子孫コンポーネントへのイベント ブロードキャストと、マルチレベルの親コンポーネントへのイベント ディスパッチの機能を実装します。ただし、これは広義のイベント ブロードキャストではありません。commentName を指定して、指定したコンポーネント名を持つコンポーネントにイベントをブロードキャスト (ディスパッチ) する必要があります。

実際、これら 2 つのメソッドの内部実装では、引き続き $parent と $children が使用されます。これらは、子ノードを段階的に走査したり、親ノードをクエリしたりするために使用されます。指定されたコンポーネント名にアクセスすると、$emit が呼び出されて、指定されたイベント。

複雑なシングルページアプリケーションのデータ管理

アプリケーションが十分に複雑な場合は、データ管理に vuex を使用してください。

以上がVue.js コンポーネントの通信の問題についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。