vueコンポーネントの値の$attrs、$listeners

vueコンポーネント伝達値のa t t t r s、attrs、attrs、listeners

vueの通信方法でよく使われるのは、親パスサブprops、子パス親が@イベントをバインドすることによって、サブコンポーネント$emitが値を伝達することも、親コンポーネントがサブコンポーネントpropsに関数を伝達することもでき、サブコンポーネントが関数を呼び出し、パラメータを利用して値を伝達することもできる.

他にもvuex集中状態管理、eventBusすなわちイベントのグローバル$emit、$onはイベント伝達値

を放出する.

および次の$attrs、$listeners.実はこの2つの属性のモード、つまり親コンポーネントAは多くのデータをサブコンポーネントBに伝達し、サブコンポーネントBは$attrsを利用して収集し、v-bind="$attrs"を利用してBに伝達されたサブコンポーネントC(つまりAコンポーネントの孫コンポーネント)を利用することができ、このように1つの属性を伝達する必要はありません.$listenersは$attrsと同様であり、$listenersは、$emitを介してイベントをサブアセンブリおよび孫コンポーネントでトリガするイベントを伝達する.

$attrs
公式解釈:
親ドメインにpropとして識別されず(取得された)特性バインドが含まれている(classおよびstyleを除く).1つのコンポーネントがpropを宣言していない場合、ここにはすべての親ドメインのバインディング(classおよびstyleを除く)が含まれ、v-bind="$attrs"を介して内部コンポーネントを転送することができます.高レベルのコンポーネントを作成する場合に便利です.
簡単に言えば、
props宣言以外のすべてのバインド属性を受信(class、styleを除く)

//parent  
<template>
	<div>
        <Son :name='name' :age='age'/>
    </div>
</template>
<script>
	export default {
     
        data() {
     
            return {
     
                name: 'Eric',
                age: '20'
            }
        }
    }
</script>

//Son  
<template>
	<div>
        //  Son            ，      
        <GrandSon v-bind='$attrs'/>
    </div>
</template>
<script>
	export default {
     
        props: ['name'],
        mounted() {
     
            //         ，  name，   age，  name props   ， $attrs   age  
            console.log(this.$attrs) //{age: '20'}
        }
    }
</script>

//GrandSon  
<template>
	<div>
             
    </div>
</template>
<script>
	export default {
     
        mounted() {
     
            //                
            console.log(this.$attrs) // {age: '20'}
        }
    }
</script>

$listeners
公式解釈:
親ドメイン(.native修飾子を含まない)v-onイベントリスナーが含まれます.v-on="$listeners"を介して内部コンポーネントを転送できます.より高いレベルのコンポーネントを作成するときに便利です.
簡単に言えば、
受信テープを除く.nativeイベント修飾子のすべてのイベントリスナー

//parent  
<template>
	<div>
        <Son @eventOne='eventHandler' @click.native='clickHandler'/>
    </div>
</template>
<script>
	export default {
     
        methods: {
     
            eventHandler() {
     
                console.log('   Parent  eventHandler')
            },
            clickHandler() {
     
                console.log('   Parent  clickHandler')
            }
        }
    }
</script>

//Son  
<template>
	<div>
        //  Son             ，      
        <GrandSon v-on='$listerners'/>
    </div>
</template>
<script>
	export default {
     
        mounted() {
     
            //          ，  eventOne，   click，  click native   ， $listerners   eventOne  
            console.log(this.$listerners) //{eventOne: fn}
            this.$emit('eventOne') //    Parent    eventHandler  
        }
    }
</script>

//GrandSon  
<template>
	<div>
             
    </div>
</template>
<script>
	export default {
     
        mounted() {
     
            //       emit  Parent        
            console.log(this.$listerners) // {eventOne: fn}
            this.$emit('eventOne') //    Parent    eventHandler  
        }
    }
</script>