vueの$attrsと$listenerおよび$propsの概要

Vueの$attrsと$listener
コンポーネント開発では、親コンポーネントがサブコンポーネントにデータとイベントを渡す必要があるという問題に遭遇したことがあります.これまで、私たちはこのように解決してきました.
親コンポーネントコード:

 1 <template>
 2   <div id="father">
 3     <child :tempdata="temp" @fatherFn="tempFn"><child>    
 4   div>    
 5 template>
 6 <script>
 7 export default {
 8   data() {
 9     temp: 'click here!'
10   },
11   method: {
12     tempFn: function(message) {
13       console.log(message);
14     }
15   }
16 }
17 script>

サブアセンブリコード:

 1 <template>
 2   <div id="child">
 3     <span @click="childClick(message)">{{ tempdata }}span>
 4   div>
 5 template>
 6 <script>
 7 export default {
 8   props: {
 9     tempdata: {
10       type: String,
11       default: ''
12     }
13   },
14   data() {
15     return {
16       message: 'i am child'
17     }
18   },
19   methods: {
20     childClick: function(message) {
21       this.$emit('fatherFn', message);
22     } 
23   }
24 }
25 script>

これにより、親コンポーネントからサブコンポーネントにデータを転送する方法が完了しましたが、サブコンポーネントのサブコンポーネントに情報を転送する場合は?祖先と孫のコンポーネント間のデータ転送をより簡単に実現する必要があることは明らかです.

 1 // father  
 2 <template>
 3   <div id="father">
 4     <child :temp="tempdata" @tempFn="fatherFn" :prop='$attrs    child      props 
 5       '>
 6     child>
 7   div>
 8 template>
 9 <script>
10 import Child from './child'
11 export default {
12    component: { Child },
13   data() {
14     tempdata: 'i am father'
15   },
16   methods: {
17     fatherFn: function() {
18       console.log('father function!');
19     }
20   }
21 }
22 script>
23 
24 // child  
25 <template>
26   <div id="child">
27     <son v-bind="$attrs" v-on="$listener">son>
28   div>
29 template>
30 <script>
31 import Son from './son'
32 export default {
33   component: {Son},
34   props: { 'prop' },
35   data() {
36     return {}
37   },
38   mounted() {
39     //      $attrs.temp，   prop
40     console.log(this.$attrs)
41     this.$emit('tempFn')
42   },
43   methods: {}
44 }
45 script>
46 
47 // son  
48 <template>
49   <div id="son">
50     {{ $attrs.temp }}
51   div>
52 template>
53 <script>
54 export default {
55   prop: {},
56   data() {
57     return {}
58   },
59   mounted() {
60     this.$emit('tempFn')
61   },
62   methods: {}
63 }
64 script>

以上から分かるように、
$listenersには、親ドメイン(.native修飾子を含まない)v-onイベントリスナーが含まれています.v-on='$listeners'を使用して内部コンポーネントに転送できます.
$attrsには、親ドメイン内の非propsプロパティバインドのプロパティ(classおよびstyleを除く)が含まれます.1つのコンポーネントがpropsを宣言していない場合、ここにはすべての親ドメインのバインド(classおよびstyleを除く)が含まれ、v-bind="$attrs"を介して内部コンポーネントに転送できます.
--------------------------------------
新しい理解
実際には$attrs、$listeners、$propsは同じです.現在のコンポーネントインスタンスからアクセスできます.具体的には、次のようになります.
$attrs:現在のコンポーネントのプロパティ、一般的にはinputのvalue、placeholderなど、コンポーネントラベルで定義された一連のプロパティですが、現在のコンポーネントに定義されているpropsプロパティは含まれません.
$listeners:現在のコンポーネントが傍受するイベント、一般的には、@inputやカスタムイベント@tempFnなどのコンポーネントを使用するときにラベルで定義されるイベント
$props:現在のコンポーネントが親コンポーネントから受信するパラメータは、一般的には$attrの差は多くありませんが、現在のコンポーネントで定義されているpropsプロパティのみが含まれます.
一般的に$attrs+$props=コンポーネントを使用するときに定義されるすべての属性で、イベントは含まれません.
では、現在のコンポーネントでは、v-bind=「$attrs」、v-bind=「$props」、v-on=「$listeners」、つまり、前の親コンポーネントから与えられた属性をすべてサブコンポーネントに渡すことを使用します.
転載先:https://www.cnblogs.com/lsboom/p/11365293.html