vue?$attrs怎么使用

本文小編為大家詳細介紹“vue $attrs怎么使用”，內(nèi)容詳細，步驟清晰，細節(jié)處理妥當(dāng)，希望這篇“vue $attrs怎么使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

$attrs的使用vue

• $attrs是在vue的2.40版本以上添加的。

• 項目中有多層組件傳參可以使用$attrs，可以使代碼更加美觀，更加簡潔，維護代碼的時候更方便。如果使用普通的父子組件傳參prop和$emit，$on會很繁瑣；如果使用vuex會大材小用，只是在這幾個組件中使用，沒必要使用vuex；使用事件總線eventBus，使用不恰當(dāng)?shù)脑?，有可能會出現(xiàn)事件多次執(zhí)行。

• 如果給組件傳遞的數(shù)據(jù)，組件不使用props接收，那么這些數(shù)據(jù)將作為組件的HTML元素的特性，這些特性綁定在組件的HTML根元素上

• inheritAttrs: false的含義是不希望本組件的根元素繼承父組件的attribute，同時父組件傳過來的屬性（沒有被子組件的props接收的屬性），也不會顯示在子組件的dom元素上，但是在組件里可以通過其$attrs可以獲取到?jīng)]有使用的注冊屬性, ``inheritAttrs: false`是不會影響 style 和 class 的綁定

以下是$attrs的使用示例

父組件的列表行數(shù)據(jù)傳遞給孫子組件展示

1.父組件（Father.vue）

給子組件關(guān)聯(lián)數(shù)據(jù)，子組件如果不用props接收，那么這些數(shù)據(jù)就作為普通的HTML特性應(yīng)用在子組件的根元素上

<template>
  <div>
    <el-table :data='list'>
      <el-table-column
        prop="name"
        label="姓名"
      ></el-table-column>
      <el-table-column
        prop="study"
        label="學(xué)習(xí)科目"
      ></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click='transmitClick(scope.row)'>傳遞</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 兒子組件 -->
    <ChildView
      :is-show="isOpen"
      :row="row"
    >
    </ChildView>
  </div>
</template>

<script>
import ChildView from './Child.vue'
export default {
  components: { ChildView },
  data() {
    return {
      isOpen: false,
      row: {},
      list: [
        { name: '王麗', study: 'Java' },
        { name: '李克', study: 'Python' }
      ]
    }
  },
  methods: {
    // 傳遞事件
    transmitClick(row) {
      this.isOpen = true;
      this.row = row
    }
  }
}
</script>

2.兒子組件（Child.vue）

中間層，作為父組件和孫子組件的傳遞中介，在兒子組件中給孫子組件添加v-bind="$attrs"，這樣孫子組件才能接收到數(shù)據(jù)

<template>
  <div class='child-view'>
    <p>兒子組件</p>
    <GrandChild v-bind="$attrs"></GrandChild>
  </div>
</template>

<script>
import GrandChild from './GrandChild.vue'
export default {
  // 繼承所有父組件的內(nèi)容
  inheritAttrs: true,
  components: { GrandChild },
  data() {
    return {
    }
  }
}
</script>

<style lang="stylus">
.child-view {
  margin: 20px
  border: 2px solid red
  padding: 20px
}
</style>

3.孫子組件（GrandChild.vue）

在孫子組件中一定要使用props接收從父組件傳遞過來的數(shù)據(jù)

<template>
  <div class='grand-child-view'>
    <p>孫子組件</p>
    <p>傳給孫子組件的數(shù)據(jù)：{{row.name}} {{row.name !== undefined? '學(xué)習(xí)' : ''}} {{row.study}}</p>
  </div>
</template>

<script>
export default {
  // 不想繼承所有父組件的內(nèi)容,同時也不在組件根元素dom上顯示屬性
  inheritAttrs: false,
  // 在本組件中需要接收從父組件傳遞過來的數(shù)據(jù)，注意props里的參數(shù)名稱不能改變，必須和父組件傳遞過來的是一樣的
  props: {
    isShow: {
      type: Boolean,
      dedault: false
    },
    row: {
      type: Object,
      dedault: () => { }
    }
  }
}
</script>

<style lang="stylus">
.grand-child-view {
  border: 2px solid green
  padding: 20px
  margin: 20px
}
</style>

結(jié)果：

在上面提過，如果給子組件傳遞的數(shù)據(jù)，子組件不使用props接收，那么這些數(shù)據(jù)將作為子組件的特性，這些特性綁定在組件的HTML根元素上，在vue2.40版本之后，可以通過inheritAttrs = false 來控制這些特性是否顯示在dom元素上

如：案例中父組件給子組件傳遞的row和isShow，子組件沒有使用props接收，這個2個數(shù)據(jù)直接作為HTML的特殊屬性。

子組件使用inheritAttrs = true，那么特性顯示在dom上，如果設(shè)置為false，那么特性不顯示在dom上

$attrs到底是什么？

先來看看官方文檔給的定義

包含了父作用域中不作為 prop 被識別 (且獲取) 的 attribute 綁定 (class 和 style 除外)。當(dāng)一個組件沒有聲明任何 prop 時，這里會包含所有父作用域的綁定 (class 和 style 除外)，并且可以通過 v-bind="$attrs" 傳入內(nèi)部組件——在創(chuàng)建高級別的組件時非常有用。

既然來到這里就繼續(xù)往下看！

既然是跟組件間數(shù)據(jù)傳值有關(guān)，話不多說，直接上栗子：

<div id="app">
    Parent:  {{msg}}
    <son-component v-bind:msg="msg"></son-component>
</div>
let vm = new Vue({
    el: '#app',
    data: {
      msg: 'baseDom'
    },
    //使用props接收
    components:{
      'son-component': {
        props: [
          'msg'
        ],
        template:`<div>Son:  <grandson-component v-bind:msg="msg"></grandson-component></div>`,
        components:{
          'grandson-component': {
            props: [
              'msg'
            ],
            template: `<div>Grandson:  {{msg}}</div>`
          }
        }
      }
    }
})

• 根組件內(nèi)調(diào)用son-component，并且綁定根組件data中的變量msg；

• 此時son-component中通過定義props可以接收到根組件的msg；

• 然后son-component中定義grandson-component組件，并且綁定msg；

• 此時grandson-component通過定義props可以接收到son-component組件的msg；

• 仔細查閱組件代碼，發(fā)現(xiàn)msg在son-component組件中僅僅起到傳遞作用；

• 有沒有其它辦法解決傳值冗余呢？別問，問就有；

let vm = new Vue({
    el: '#app',
    data: {
      msg: 'baseDom'
    },
    //使用$attrs接收
    components:{
      'son-component': {
        // props: [
        //   'msg'
        // ],
        template:`<div>Son:  <grandson-component v-bind="$attrs"></grandson-component></div>`,
        components:{
          'grandson-component': {
            props: [
              'msg'
            ],
            template: `<div>Grandson:  {{msg}}</div>`
          }
        }
      }
    }
})

• 首先，在son-component中不再接收根組件的msg；

• son-component組件調(diào)用grandson-component組件，綁定主角$attrs；

• 即可實現(xiàn)接收根組件msg；

讀到這里，這篇“vue $attrs怎么使用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。