vue.js+vuetify學習開發排坑：一個古怪的代碼 v-slot:activator="{ on, attrs }"

由於需要全棧開發一個售票系統項目，時隔一年后重新撿回了我的前端技術~

開發習慣是邊看文檔邊做，然后再vuetify這個MD設計的UI元件庫翻來翻去，再涉及到元件交互的時候有幾段代碼不是很能理解

      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="red lighten-2"
          dark
          v-bind="attrs"
          v-on="on"
        >
          Click Me
        </v-btn>
      </template>

首先需要明白&attrs的用法，查了一下官方文檔：

 

vm.$attrs

• 類型：{ [key: string]: string }

• 只讀

• 詳細：

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

 

我基本理解成$attrs 可以收集父組件中的所有傳過來的屬性除了那些在組件中沒有通過 props 定義的。就是將父類中的很多屬性和方法傳遞給內部組件，方便執行一些命令。

v-slot是插槽的意思，v-slot:activator,意思是slot="activator",是新的寫法。

作用域插槽

一般在父組件中引入了子組件，然后又在子組件中插入了插槽，如果插槽中引入了屬性，例如：

//父組件中
<current-user>
  {{ user.firstName }}
</current-user>

 

此時的user屬性只能引入的是父組件中的user屬性，而不是子組件

這是vue的一個規則：父級模板里的所有內容都是在父級作用域中編譯的；子模板里的所有內容都是在子作用域中編譯的

那么，如何在父組件中引用子組件的數據呢？

這就需要使用到作用域插槽：

在子組件childCpn中：

<slot v-bind:user="user">
      默認文字
</slot>

在父組件中：

<childCpn>
  <template v-slot:default="slotProps">
    {{ slotProps.user}}
  </template>
</childCpn>

這樣使用插槽時，就可以在父組件中直接使用了子組件的屬性

所以回到一開始的問題，代碼可以寫成如下形式：

<v-menu>
    <template v-slot:activator="slotProps">
        <v-btn v-bind="slotProps.attrs" v-on="slotProps.on">按鈕</v-btn>
    </template>
</v-menu>

 

通過獲取到了子組件的屬性，然后就可以在父組件中直接使用了

另外，作用域插槽的內部工作原理是將你的插槽內容包括在一個傳入單個參數的函數里：

function (slotProps) {
  // 插槽內容
}

這意味着 v-slot 的值實際上可以是任何能夠作為函數定義中的參數的 JavaScript 表達式。所以在支持的環境下（比如支持ES6的瀏覽器），也可以使用 ES6 解構來傳入具體的插槽 prop，如下：

<v-menu>
    <template v-slot:activator="{ on, attrs }">
        <v-btn v-bind="attrs" v-on="on">按鈕</v-btn>
    </template>
</v-menu>

 

這樣的寫法更加簡潔明了

（關於解構語法不懂的可以去百度一下了解學習）

部分轉載自https://blog.csdn.net/weixin_44710964/article/details/107428727