前端Vue：函數式組件

天天學習一個vue知識點呀

函數式組件特色：

• 沒有管理任何狀態
• 沒有監放任何傳遞給它的狀態
• 沒有生命週期方法
• 它只是接收一些prop的函

咱們將這樣的組件標記爲functional：

• 無狀態 == 無響應式數據
• 無實例 == 無this上下文

函數式組件的優勢：

• 渲染開銷低，由於函數式組件只是函數；

函數式組件基本寫法：

{
  functional: true,
  // Props 是可選的
  props: {
    // ...
  },
  // 爲了彌補缺乏的實例
  // 提供第二個參數做爲上下文
  render: function (createElement, context) {
    // ...
  }
}
複製代碼

組件須要的一切都是經過 context 參數傳遞，它是一個包含以下字段的對象：

• props: 提供全部prop的對象
• children:VNode 子節點的數組
• slots: 一個函數，返回了包含全部插槽的對象
• scoptedSlots:(2.6.0) 一個暴露傳入的做用域插槽的對象，也以函數形式暴露普通插槽
• data:傳遞個組件的整個數據對象，做爲createElement的第二個參數傳入組件
• parent:對父組件的引用
• listeners:(2.3.0+) 一個包含了：全部父組件爲當前組件祖冊的事件監聽器對象，是data.on的一個別名
• injections:(2.3.0+) 若是使用了inject選項，則改對象包含了：應當被注入的屬性；

使用場景1：包裝組件

• 程序化地在多個組件中選擇一個來代爲渲染；

• 在將 children、props、data 傳遞給子組件以前操做它們； 下面是一個 smart-list 組件的例子，它能根據傳入 prop 的值來代爲渲染更具體的組件：

  var EmptyList = { /* ... */ }
    
    var TableList = { /* ... */ }
    
    var OrderedList = { /* ... */ }
    
    var UnorderedList = { /* ... */ }
  
    Vue.component('smart-list', {
      functional: true,
      props: {
        items: {
          type: Array,
          required: true
        },
        isOrdered: Boolean
      },
      render: function (createElement, context) {
        function appropriateListComponent () {
          var items = context.props.items
    
          if (items.length === 0)           return EmptyList
          if (typeof items[0] === 'object') return TableList
          if (context.props.isOrdered)      return OrderedList
    
          return UnorderedList
        }
    
        return createElement(
          appropriateListComponent(),
          context.data,
          context.children
        )
      }
    })
  複製代碼

slots() 和children的對比

分析：

從字面意思顯而易見：

1. children,能夠獲取當前組件節點的全部的子節點；

2. slots()函數返回了全部的插槽對象； 舉例：

   <my-functional-component>
      <p v-slot:foo>
        first
      </p>
      <p>second</p>
    </my-functional-component>
   複製代碼

對於以上示例組件：

• children 會給你兩個段落標籤；
• slots().default 只會傳遞第二個匿名段落標籤
• slots().foo 會傳遞第一個具名段落標籤

總結：

• 你能夠選擇使用slots()讓組件感知某個插槽機制，也能夠簡單地經過傳遞 children，移交給其它組件去處理

參考官網