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

Posted on by

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

上圖組件之間的關系如下:

  • ComponentGrandParent為最外層父級組件(爺)

  • ComponentParent為中間層父級組件(父)

  • ComponentChild為子組件

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

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

如果需要傳遞的屬性多，而且ComponentParent中沒有用到的ComponentGrandParent傳遞過來的屬性的時候，就很尷尬，很不優雅，有時候還需要在寫watch監聽傳遞過來的數據，然後再賦值給data中的prop1,然後再傳遞給ComponentChild

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

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

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

紙上得來終覺淺，下面來看下實際的使用，目錄結構如下:

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>基礎知識</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值修改回調函數
     */
    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中有關於來自父組件BasicView.vue相關的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的輸入回調函數
     */
    inputHandler(val) {
      this.$emit("changGrandChildVal", val);
    },
  },
};
</script>

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

從而實現瞭優雅的屬性透傳，在組件封裝中比較有用。

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

總結

到此這篇關於vue2.x中$attrs使用的文章就介紹到這瞭,更多相關vue2.x $attrs使用內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：