vue中的$attrs和$listener以及$props簡介

Vue中的$attrs和$listener

大家在組件開發中肯定遇到過父組件需要向子組件傳遞數據和事件的問題，以往我們是這樣解決的：

父組件代碼：

<template>
  <div id="father">
    <child :tempdata="temp" @fatherFn="tempFn"><child>    
  </div>    
</template>
<script>
export default {
  data() {
    temp: 'click here!'
  },
  method: {
    tempFn: function(message) {
      console.log(message);
    }
  }
}
</script>

子組件代碼：

<template>
  <div id="child">
    <span @click="childClick(message)">{{ tempdata }}</span>
  </div>
</template>
<script>
export default {
  props: {
    tempdata: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      message: 'i am child'
    }
  },
  methods: {
    childClick: function(message) {
      this.$emit('fatherFn', message);
    } 
  }
}
</script>

這樣我們完成了從父組件傳遞數據已經方法到子組件，但是如果是向子組件的子組件傳遞信息呢？顯然我們需要換一種更加簡單的方式實現祖孫組件之間的數據傳輸，小二上代碼：

// father組件
<template>
  <div id="father">
    <child :temp="tempdata" @tempFn="fatherFn" prop='$attrs不會傳遞child組件中定義的props 
     值'>
    </child>
  </div>
</template>
<script>
import Child from './child'
export default {
   component: { Child },
  data() {
    tempdata: 'i am father'
  },
  methods: {
    fatherFn: function() {
      console.log('father function!');
    }
  }
}
</script>

// child組件
<template>
  <div id="child">
    <son v-bind="$attrs" v-on="$listener"></son>
  </div>
</template>
<script>
import Son from './son'
export default {
  component: {Son},
  props: { 'prop' },
  data() {
    return {}
  },
  mounted() {
    // 結果顯示為$attrs.temp，不包含prop
    console.log(this.$attrs)
    this.$emit('tempFn')
  },
  methods: {}
}
</script>

// son組件
<template>
  <div id="son">
    {{ $attrs.temp }}
  </div>
</template>
<script>
export default {
  prop: {},
  data() {
    return {}
  },
  mounted() {
    this.$emit('tempFn')
  },
  methods: {}
}
</script>

綜上，可知：

$listeners包含了父作用域中的 (不含 .native 修飾器的) v-on 事件監聽器，它可以通過 v-on=”$listeners” 傳入內部組件。

$attrs包含了父作用域中非props 特性綁定的屬性 (class 和 style 除外)。當一個組件沒有聲明任何 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"也就是把之前父組件那里給它的屬性再全部傳到它的子組件。