この記事では主に、Vue v2.4 の新しい $attrs 属性と $listeners 属性の使用方法をサンプル コードを通じて詳しく紹介します。これは、学習や仕事に必要なすべての人の学習に役立ちます。 、ぜひフォローして一緒に学んでください。
マルチレベルのコンポーネントのネストでデータを渡す必要がある場合、通常使用される方法は vuex を使用することです。中間処理を行わずにデータを転送するだけの場合、vuex を使用して処理するのは少しやりすぎです。 Vue バージョン 2.4 では、v-bind="$attrs" を使用して、props 属性バインディングとはみなされない親コンポーネントの属性を子コンポーネントに渡す別のメソッドが提供されており、通常は interitAttrs オプションとともに使用されます。これら 2 つの属性について言及する理由は、これらの属性の出現により、vuex やイベント バスに依存せずにコンポーネント間のコンポーネント間の通信が簡潔になり、ビジネスが明確になるためです。
まず、次のアプリケーション シナリオを分析します:
上の図に示すように、3 つのコンポーネント A、B、および C がネストされています。 Vue に従って順番に開発習慣によれば、親子コンポーネントの通信は次の方法で実現できます:
A から B は props を通じて子コンポーネントに渡され、B から A は $emit in を通じて達成されます。 B コンポーネント、および A コンポーネントの v-on
グローバル Vuex 共有状態を設定することにより、計算されたプロパティを通じてデータが取得および更新され、親子コンポーネント通信の目的を達成するためのミューテーションがコミットされます。
Vue Event Bus は Vue インスタンスを使用してイベントを監視および公開し、コンポーネント間の転送を実現します。
データがグローバルである必要がなく、親コンポーネントと子コンポーネントの間でのみ通信する場合は、多くの場合、最初の方法で十分です。
上図に示すように、コンポーネント A とコンポーネント C は、複数のレベルにわたるコンポーネントの入れ子関係に属しています。 2 つは次のとおりです: 通信は、多くの場合次のメソッドを通じて達成する必要があります:
B コンポーネントの転送を利用して、props が上から下に、下から上に順番に渡され、$emitイベントは、クロスレベルのコンポーネント通信の効果を実現するために渡されます
Vuex のグローバル状態共有の助けを借りて
Vue イベント バスは、Vue インスタンスを使用してイベントを監視および公開し、コンポーネント間の転送を実現します。
明らかに、props と $emit による最初のメソッドではコンポーネント間のビジネス ロジックが肥大化し、コンポーネント B は転送ステーションとしてのみ機能します。 2 番目の Vuex メソッドを使用する場合、場合によっては少しやりすぎであるように見えます (コンポーネント間のデータ転送を実現するだけであり、データ共有の概念ではありません)。 3 番目の状況は、実際のプロジェクト運用でよく見られます。適切なイベント監視とリリース管理が達成できない場合、多くの場合、複数人でのコラボレーション プロジェクトではデータ フローが混乱しやすくなります。
$attrs と $listeners の出現により、コンポーネント B が props と events を渡すときに、冗長なコードを記述する必要がなく、単に $attrs と $listeners を渡すだけです。の上。
は次のようになります:
<template>
<p id="app">
<child1
:p-child1="child1"
:p-child2="child2"
v-on:test1="onTest1" //此处监听了两个事件，可以在B组件或者C组件中直接触发
v-on:test2="onTest2">
</child1>
</p>
</template>
<script>
import Child1 from './Child1.vue';
export default {
data () {
return {};
},
components: { Child1 },
methods: {
onTest1 () {
console.log('test1 running...');
},
onTest2 () {
console.log('test2 running');
}
}
};
</script><template>
<p class="child-1">
<p>in child1:</p>
<p>props: {{pChild1}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
<!-- C组件中能直接触发test的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
<!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<child2 v-bind="$attrs" v-on="$listeners"></child2>
</p>
</template>
<script>
import Child2 from './Child2.vue';
export default {
props: ['pChild1'],
data () {
return {};
},
inheritAttrs: false,
components: { Child2 },
mounted () {
this.$emit('test1');
}
};
</script>結果:
in child1:
props: v_child1
$attrs: { "p-child2": "v_child2"}
<template>
<p class="child-2">
<p>in child2:</p>
<p>props: {{pChild2}}</p>
<p>$attrs: {{$attrs}}</p>
<hr>
</p>
</template>
<script>
export default {
props: ['pChild2'],
data () {
return {};
},
inheritAttrs: false,
mounted () {
this.$emit('test2');
}
};
</script>Result:
in child2:
props: v_child2
$attrs: {}
$ attrs
には、親スコープ内のプロパティとはみなされない (およびプロパティであることが期待されていない) 属性バインディング (クラスとスタイルを除く) が含まれています。コンポーネントが props を宣言していない場合、すべての親スコープ バインディング (クラスとスタイルを除く) がここに含まれ、内部コンポーネントは v-bind="$attrs" を通じて渡すことができます - 上位レベルのコンポーネントを作成するときに非常に便利です。
$listeners
には、親スコープに v-on イベント リスナーが含まれます (.native 修飾子なし)。これは v-on="$listeners" を介して内部コンポーネントに渡すことができ、より高いレベルのコンポーネントを作成する場合に非常に役立ちます。
inheritAttrs
デフォルトでは、props として認識されない親スコープ内の属性バインディングは「フォールバック」し、通常の HTML 属性として子コンポーネントのルート要素に適用されます。ターゲット要素または別のコンポーネントをラップするコンポーネントを作成する場合、予期される動作に必ずしも準拠するとは限りません。 InheritAttrs を false に設定すると、これらのデフォルトの動作が削除されます。これらの機能は、インスタンス属性 $attrs (これも 2.4 の新機能) を通じて有効にすることができ、v-bind を通じて非ルート要素に明示的にバインドすることができます。
上記の機能を使用すると、Vuex やイベント バスを使用せずに、コンポーネントのクロスレベル プロパティとイベント配信の複雑さを完全に軽減できます。
上記は私があなたのためにまとめたものです。
関連記事:
jqueryを使用してリンクをクリックして背景スタイルを変更する方法
Ajax同期操作について、ブラウザが一時停止しているように見える（詳細なチュートリアル）
テキストに入力された単語数を監視する方法js のボックス (詳細なチュートリアル)
react-router4 は webpack require.ensure と連携して非同期読み込みを実現します (詳細なチュートリアル)
以上がVue の $attrs 属性の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
