Vue中函數化組件的示例分析

這篇文章將為大家詳細講解有關(guān)Vue中函數化組件的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

介紹

之前創(chuàng )建的錨點(diǎn)標題組件是比較簡(jiǎn)單，沒(méi)有管理或者監聽(tīng)任何傳遞給他的狀態(tài)，也沒(méi)有生命周期方法。它只是一個(gè)接收參數的函數。

在這個(gè)例子中，我們標記組件為 functional， 這意味它是無(wú)狀態(tài)（沒(méi)有 data），無(wú)實(shí)例（沒(méi)有 this 上下文）。

一個(gè) 函數化組件 就像這樣：

Vue.component('my-component', {
 functional: true,
 // 為了彌補缺少的實(shí)例
 // 提供第二個(gè)參數作為上下文
 render: function (createElement, context) {
  // ...
 },
 // Props 可選
 props: {
  // ...
 }
})

組件需要的一切都是通過(guò)上下文傳遞，包括：

1. props: 提供props 的對象

2. children: VNode 子節點(diǎn)的數組

3. slots: slots 對象

4. data: 傳遞給組件的 data 對象

5. parent: 對父組件的引用

6. listeners: (2.3.0+) 一個(gè)包含了組件上所注冊的 v-on 偵聽(tīng)器的對象。這只是一個(gè)指向 data.on 的別名。

7. injections: (2.3.0+) 如果使用了 inject 選項, 則該對象包含了應當被注入的屬性。

在添加 functional: true 之后，錨點(diǎn)標題組件的 render 函數之間簡(jiǎn)單更新增加context參數，this.$slots.default 更新為 context.children，之后this.level 更新為 context.props.level。

因為函數化組件只是一個(gè)函數，所以渲染開(kāi)銷(xiāo)也低很多。另外，這也意味著(zhù)函數化組件不會(huì )出現在 VueJS Chrome 開(kāi)發(fā)者工具的組件樹(shù)里。

在作為包裝組件時(shí)它們也同樣非常有用，比如，當你需要做這些時(shí)：

程序化地在多個(gè)組件中選擇一個(gè)

在將 children, props, data 傳遞給子組件之前操作它們。

下面是一個(gè)依賴(lài)傳入 props 的值的smart-list組件例子，它能代表更多具體的組件：

var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }
Vue.component('smart-list', {
 functional: true,
 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
  )
 },
 props: {
  items: {
   type: Array,
   required: true
  },
  isOrdered: Boolean
 }
})

slots()和children對比

你可能想知道為什么同時(shí)需要 slots()和children。slots().default 不是和 children 類(lèi)似的嗎？在一些場(chǎng)景中，是這樣，但是如果是函數式組件和下面這樣的 children 呢？

<my-functional-component>
 <p slot="foo">
  first
 </p>
 <p>second</p>
</my-functional-component>

對于這個(gè)組件，children 會(huì )給你兩個(gè)段落標簽，而 slots().default 只會(huì )傳遞第二個(gè)匿名段落標簽，slots().foo 會(huì )傳遞第一個(gè)具名段落標簽。同時(shí)擁有 children 和 slots() ，因此你可以選擇讓組件通過(guò) slot() 系統分發(fā)或者簡(jiǎn)單的通過(guò) children 接收，讓其他組件去處理。

示例

漸進(jìn)過(guò)渡

之前的Vue學(xué)習筆記進(jìn)階篇——列表過(guò)渡及其他中可復用的過(guò)渡提到用函數組件實(shí)現合適，下面就用函數化組件來(lái)實(shí)現那個(gè)漸進(jìn)過(guò)渡

<div id="app5">
  <input v-model="query">
  <my-transition :query="query" :list="list">
    <li v-for="(item, index) in computedList"
      :key="item.msg"
      :data-index="index">
      {{item.msg}}
    </li>
  </my-transition>
</div>
  Vue.component('my-transition', {
    functional:true,
    render:function (h, ctx) {
      var data = {
        props:{
          tag:'ul',
          css:false
        },
        on:{
          beforeEnter:function (el) {
            el.style.opacity = 0
            el.style.height = 0
          },
          enter:function (el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function () {
              Velocity(el, {opacity:1, height:'1.6em'},{complete:done})
            }, delay)
          },
          leave:function (el, done) {
            var delay = el.dataset.index * 150
            setTimeout(function () {
              Velocity(el, {opacity:0, height:0}, {complete:done})
            }, delay)
          }
        }
      }
      return h('transition-group', data, ctx.children)
    },
    props:['query', 'list']
  })

  var app5 = new Vue({
    el:'#app5',
    data:{
      query:'',
      list:[
        {msg:'Bruce Lee'},
        {msg:'Jackie Chan'},
        {msg:'Chuck Norris'},
        {msg:'Jet Li'},
        {msg:'Kung Furry'},
        {msg:'Chain Zhang'},
        {msg:'Iris Zhao'},
      ]
    },
    computed:{
      computedList:function () {
        var vm = this
        return this.list.filter(function (item) {
          return item.msg.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1
        })
      }
    },
  })

運行結果：