快捷導(dǎo)航

vue2.x中$attrs的使用方法教程

更新時間：2022年11月23日 14:55:37 作者：Geek喜多川

正常情況下Vue推薦用props向子組件參數(shù),但是在特定場景下,使用$attrs會更方便,下面這篇文章主要給大家介紹了關(guān)于vue2.x中$attrs使用的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

最近筆者在做大屏項目的時候，由于組件數(shù)據(jù)傳遞，一層傳遞一層，使用vuex或者pinia又顯得過于笨重。故而想起了那個傳說中的v-bind="$attrs"以及v-on="$listeners"，下面就來聊下使用：

上圖組件之間的關(guān)系如下:

ComponentGrandParent為最外層父級組件(爺)
ComponentParent為中間層父級組件(父)
ComponentChild為子組件

ComponentGrandParent組件想把props傳遞給ComponentChild就通常需要在ComponentParent中通過屬性一個個的傳遞

//ComponentParent組件
<template>
  <ComponentChild :propa="prop1"
                  :propb="prop2"
                  :propc="prop3"
                  ...
  />
</template>

如果需要傳遞的屬性多，而且ComponentParent中沒有用到的ComponentGrandParent傳遞過來的屬性的時候，就很尷尬，很不優(yōu)雅，有時候還需要在寫watch監(jiān)聽傳遞過來的數(shù)據(jù)，然后再賦值給data中的prop1,然后再傳遞給ComponentChild

使用$attrs能解決上述問題，那么什么是$attrs呢？

透傳 Attributes 是指由父組件傳入，且沒有被子組件聲明為props或是組件自定義事件的 attributes 和事件處理函數(shù)。默認情況下，若是單一根節(jié)點組件，$attrs 中的所有屬性都是直接自動繼承自組件的根元素。

大白話講就是沒有父組件傳遞過來的props,在子組件中沒有對應(yīng)的props聲明，那么在子組件中就可以通過v-on:$attrs將父組件的props透傳給孫組件,在二次封裝一些elementui的組件有奇效

紙上得來終覺淺，下面來看下實際的使用，目錄結(jié)構(gòu)如下:

src
├─ blocks
│ └─ PassVal
│ ├─ components
│ │ └─ PassInput.vue
│ └─ PassVal.vue
├─ view
│ ├─ basic
│ │ └─ BasicView.vue
├─ App.vue
└─ main.js

BasicView.vue(父組件)中引入PassVal.vue(子組件)；
PassVal.vue(子組件)中引入PassInput.vue(孫組件)

//BasicView.vue代碼如下:

<template>
  <div class="basic">
    <h3><i class="title_icon"></i>基礎(chǔ)知識</h3>
    <PassVal
      placeholder="我是placerholder"
      :clearable="true"
      :defaultVal="defaultVal"
      @changGrandChildVal="changGrandChildVal"
    />
  </div>
</template>

<script>
import PassVal from "@/blocks/PassVal/PassVal.vue";
export default {
  data() {
    return {
      defaultVal: "測試透傳",
    };
  },
  components: {
    PassVal,
  },
  methods: {
    /**
     * @function input值修改回調(diào)函數(shù)
     */
    changGrandChildVal(val) {
      console.log("PassInput組件的值變了", val);
    },
  },
};
</script>

<style scoped>
.basic {
  width: 100%;
  height: 100%;
}
</style>

在PassVal想要傳遞三個屬性placeholder="我是placerholder" 、:clearable="true"以及:defaultVal="defaultVal"

接著來看下在PassVal中的處理:

//PassVal.vue
<template>
  <div class="passval">
    <el-divider content-position="left">1-$attr和 $listeners</el-divider>
    <div class="container">
      <div class="flex-two">
        <passInput v-bind="$attrs" v-on="$listeners"></passInput>
      </div>
    </div>
  </div>
</template>

<script>
import PassInput from "./components/PassInput.vue";
export default {
  components: {
    PassInput,
  },
  props: {
    defaultVal: {
      type: String,
      default: "輸入框默認值",
    },
  },
};
</script>

<style scoped>
.passval {
  width: 100%;
  height: 100%;
}
</style>

這里通過v-bind="$attrs"和 v-on="$listeners"將屬性和方法透傳下去
如果在PassVal.vue中有關(guān)于來自父組件BasicView.vue相關(guān)的props聲明，那么v-bind="$attrs"透傳的屬性會將聲明的這個屬性剔除，透傳余下的porps屬性。
- 例如：如果在PassVal.vue中的props中聲明defaultVal，那么父組件BasicView.vue傳遞過來的defaultVal將無法通過v-bind="$attrs"透傳給子組件PassInput.vue

而在PassInput.vue組件中

<template>
  <div class="pass-input">
    <el-input v-bind="$attrs" v-model="value" @input="inputHandler"></el-input>
  </div>
</template>

<script>
export default {
  name: "PassInput",
  created() {
    console.log("我是$attrs", this.$attrs);
    console.log("我是$listeners", this.$listeners);
  },
  data() {
    return {
      value: "",
    };
  },
  methods: {
    /**
     * @function el-input的輸入回調(diào)函數(shù)
     */
    inputHandler(val) {
      this.$emit("changGrandChildVal", val);
    },
  },
};
</script>

<style scoped>
.pass-input {
  width: 100%;
  height: 100%;
}
</style>

從而實現(xiàn)了優(yōu)雅的屬性透傳，在組件封裝中比較有用。

生命周期中的console.log("我是$attrs", this.$attrs)和console.log("我是$listeners", this.$listeners);以結(jié)果如下: