Vue學習筆記進階篇之函數(shù)化組件解析
這兩天學習了Vue.js 感覺函數(shù)化組件這個地方知識點挺多的,而且很重要,所以,今天添加一點小筆記
介紹
之前創(chuàng)建的錨點標題組件是比較簡單,沒有管理或者監(jiān)聽任何傳遞給他的狀態(tài),也沒有生命周期方法。它只是一個接收參數(shù)的函數(shù)。
在這個例子中,我們標記組件為 functional, 這意味它是無狀態(tài)(沒有 data),無實例(沒有 this 上下文)。
一個 函數(shù)化組件 就像這樣:
Vue.component('my-component', { functional: true, // 為了彌補缺少的實例 // 提供第二個參數(shù)作為上下文 render: function (createElement, context) { // ... }, // Props 可選 props: { // ... } })
組件需要的一切都是通過上下文傳遞,包括:
- props: 提供props 的對象
- children: VNode 子節(jié)點的數(shù)組
- slots: slots 對象
- data: 傳遞給組件的 data 對象
- parent: 對父組件的引用
- listeners: (2.3.0+) 一個包含了組件上所注冊的 v-on 偵聽器的對象。這只是一個指向 data.on 的別名。
- injections: (2.3.0+) 如果使用了 inject 選項, 則該對象包含了應(yīng)當被注入的屬性。
在添加 functional: true 之后,錨點標題組件的 render 函數(shù)之間簡單更新增加context參數(shù),this.$slots.default 更新為 context.children,之后this.level 更新為 context.props.level。
因為函數(shù)化組件只是一個函數(shù),所以渲染開銷也低很多。另外,這也意味著函數(shù)化組件不會出現(xiàn)在 VueJS Chrome 開發(fā)者工具的組件樹里。
在作為包裝組件時它們也同樣非常有用,比如,當你需要做這些時:
程序化地在多個組件中選擇一個
在將 children, props, data 傳遞給子組件之前操作它們。
下面是一個依賴傳入 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對比
你可能想知道為什么同時需要 slots()
和children
。slots().default
不是和 children
類似的嗎?在一些場景中,是這樣,但是如果是函數(shù)式組件和下面這樣的 children
呢?
<my-functional-component> <p slot="foo"> first </p> <p>second</p> </my-functional-component>
對于這個組件,children 會給你兩個段落標簽,而 slots().default 只會傳遞第二個匿名段落標簽,slots().foo 會傳遞第一個具名段落標簽。同時擁有 children 和 slots() ,因此你可以選擇讓組件通過 slot() 系統(tǒng)分發(fā)或者簡單的通過 children 接收,讓其他組件去處理。
示例
漸進過渡
之前的Vue學習筆記進階篇——列表過渡及其他中可復(fù)用的過渡提到用函數(shù)組件實現(xiàn)合適,下面就用函數(shù)化組件來實現(xiàn)那個漸進過渡
<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 }) } }, })
運行結(jié)果:
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli中實現(xiàn)響應(yīng)式布局的方法
這篇文章主要介紹了vue-cli中實現(xiàn)響應(yīng)式布局的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2021-03-03Vue?Router?返回后記住滾動條位置的實現(xiàn)方法
使用?Vue?router?創(chuàng)建?SPA(Single?Page?App),往往有這種需求:首頁是列表頁,點擊列表項進入詳情頁,在詳情頁點擊返回首頁后,希望看到的是,首頁不刷新,并且滾動條停留在之前的位置,這篇文章主要介紹了Vue?Router?返回后記住滾動條位置的實現(xiàn)方法,需要的朋友可以參考下2023-09-09vue中$set的使用(結(jié)合在實際應(yīng)用中遇到的坑)
這篇文章主要介紹了vue中$set的使用(結(jié)合在實際應(yīng)用中遇到的坑),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-07-07在Vue中使用Avue、配置過程及實際應(yīng)用小結(jié)
在項目中遇到通過點擊加號實現(xiàn)輸入框的增加、以及對該輸入框的輸入內(nèi)容進行驗證,通過這些誘導(dǎo)因素創(chuàng)作的這篇文章,本文重點給大家介紹在Vue中使用Avue、配置過程以及實際應(yīng)用,需要的朋友可以參考下2022-10-10