この記事では、コンポーネントをカプセル化するための vue の強力なツールである $attrs 属性と $listeners 属性について説明し、それらがどのように使用されるかを見ていきます。
マルチレベルのコンポーネントのネストでデータを渡す必要がある場合、通常使用される方法は vuex
を使用することです。しかし、処理に vuex
を使用して、中間処理を行わずにデータを渡すだけではやりすぎです。したがって、$attrs
と $listeners
という 2 つの属性があり、これらは通常、inheritAttrs と一緒に使用されます。 [関連する推奨事項: vuejs ビデオ チュートリアル ]
がない場合) prop
受付はサブコンポーネント内の最も外側のタグに自動的に設定されます。class
と style
の場合、最も外側のタグの class
が設定されます。と style
をマージします。 prop
属性を継承したくない場合は、inheritAttrs
を使用して継承を無効にしてから、 v-bind="$ attrs"
は、外部から渡される非 prop
属性を目的のタグに設定しますが、class
と ## は変更されません。 #スタイル###。
inheritAttrs 属性
2.4.0公式 Web サイトのリンクを追加 https://cn .vuejs.org/v2/api/#inheritAttrs
boolean
true
デフォルトの親ロールの属性バインディング小道具として認識されないフィールドは「フォールバック」し、通常の HTML 属性として子コンポーネントのルート要素に適用されます。ターゲット要素または別のコンポーネントをラップするコンポーネントを作成する場合、予期される動作に必ずしも準拠するとは限りません。 inheritAttrs
をfalse に設定すると、これらのデフォルトの動作は削除されます。これらの属性は、インスタンス プロパティ
$attrs (これも 2.4 の新機能) を通じて有効にすることができ、
v-bind を通じて非ルート要素に明示的にバインドできます。
注: このオプション
は、
class および style バインディングには影響しません。
親コンポーネント
<template> <my-input required placeholder="请输入内容" type="text" class="theme-dark" /> </template> <script> import MyInput from './child' export default { name: 'parent', components: { MyInput } } </script>
<template> <div> <input v-bind="$attrs" class="form-control" /> </div> </template> <script> export default { name: 'MyInput', inheritAttrs: false } </script>
v-bind="$attrs"
を使用すると、自動的に受け入れてバインドしますinheritAttrs: false
inheritAttrs: true
##listeners (公式サイトの説明)
v-on="$listeners"
を介して内部コンポーネントに渡すことができます。これは、より高いレベルのコンポーネントを作成するときに非常に役立ちます。
コードから始めましょう。ここでは、
focue<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 父组件
<template>
<my-input
required
placeholder
class="theme-dark"
@focue="onFocus"
@input="onInput"
>
</my-input>
</template>
<script>
import MyInput from &#39;./child&#39;
export default {
components: {
MyInput
},
methods: {
onFocus (e) {
console.log(e.target.value)
},
onInput (e) {
console.log(e.target.value)
}
}
}
</script></pre><div class="contentsignin">ログイン後にコピー</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 子组件
<template>
<div>
<input
type="text"
v-bind="$attrs"
class="form-control"
@focus="$emit(&#39;focus&#39;, $event)"
@input="$emit(&#39;input&#39;, $event)"
/>
</div>
</template>
<script>
export default {
name: &#39;MyInput&#39;,
inheritAttrs: false
}
</script></pre><div class="contentsignin">ログイン後にコピー</div></div>
の 2 つの例を示します。ネイティブ イベントをバインドするのは非常に面倒です。すべてのネイティブ イベントをバインドする必要がありますが、v-on="$listeners"
を使用すると、多くの手間が省けます
<input type="text" v-bind="$attrs" class="form-control" + v-on="$listeners" - @focus="$emit('focus', $event)" - @input="$emit('input', $event)" />
このように、1 行のコードで解決できますすべてのネイティブ イベントをバインドする問題 [関連する推奨事項: "
"、"
web フロントエンド以上がvue の $attrs 属性と $listeners 属性を理解し、その使用法について説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。