Vue.js提供了一個functional的布爾值選項亿傅，設置為true可以使組件無狀態(tài)和無實例老玛，也就是沒有data和this上下文淤年。這樣用render函數返回虛擬節(jié)點可以更容易渲染，因為函數化組件只是一個函數蜡豹，渲染開銷要小很多麸粮。
使用函數化組件時，Render函數提供了第二個參數context來提供臨時上下文镜廉。組件需要的data,props,slots,children,parent都是通過這個上下文來傳遞的豹休，比如this.level要改寫成context.props.level,this.$slolts.default改寫成context.children。
下面示例用函數化組件展示了一個根據數據智能選擇不同組件的場景：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<smart-item :data="data"></smart-item>
<button @click="change('img')">切換為圖片組件</button>
<button @click="change('video')">切換為視頻組件</button>
<button @click="change('text')">切換為文本組件</button>
</div>
<script>
// 圖片組件選項
var ImgItem = {
props:['data'],
render:function (createElement) {
return createElement('div',[
createElement('p','圖片組件'),
createElement('img',{
attrs:{
src: this.data.url
}
})
]);
}
}
// 視頻組件選項
var VideoItem = {
props:['data'],
render:function (createElement) {
return createElement('div',[
createElement('p','視頻組件'),
createElement('video',{
attrs:{
src: this.data.url,
controls: 'controls',
autoplay: 'autoplay'
}
})
]);
}
}
// 純文本組件選項
var TextItem = {
props:['data'],
render:function (createElement) {
return createElement('div',[
createElement('p','純文本組件'),
createElement('p',this.data.text)
]);
}
}
Vue.component('smart-item',{
// 函數化組件
functional: true,
render: function (createElement,context) {
// 根據傳入的數據桨吊，智能判斷顯示哪種組件
function getComponent(){
var data = context.props.data;
// 判斷prop:data的type字段是屬于哪種類型的組件
if( data.type === 'img' ) return ImgItem;
if( data.type === 'video' ) return VideoItem;
return TextItem;
}
return createElement(
getComponent(),
{
props:{
// 把smart-item的prop:data傳給上面智能選擇的組件
data: context.props.data
}
},
// 相當于this.$slots.default
context.children
);
},
props:{
data:{
type: Object,
required: true
}
}
});
var app = new Vue({
el: '#app',
data: {
data:{}
},
methods:{
// 切換不同類型組件的數據
change: function (type) {
if( type === 'img' ){
this.data = {
type: 'img',
url: 'https://raw.githubusercontent.com/iview/iview/master/assets/logo.png'
}
}else if( type === 'video' ){
this.data = {
type: 'video',
url: 'http://vjs.zencdn.net/v/oceans.mp4'
}
}else if( type === 'text' ){
this.data = {
type: 'text',
content: '這是一段純文本'
}
}
}
},
created: function () {
// 初始化時，默認設置圖片組件的數據
this.change('img');
}
});
</script>
</body>
</html>
逐步分析一下實現內容凤巨。ImgIten,VideoItem,TextItem這3個對象分別是圖片組件视乐、視頻組件和純文本組件的選項，它們都接收一個prop:data敢茁。在函數化組件smart-item里佑淀，也有props:data，通過getComponent函數來判斷其字段type的值彰檬，選擇這條數據適合渲染的組件伸刃。通過createElement把getComponent()返回的對象設置為第一個參數，然后通過第二個參數把smart-item的data傳遞到選擇的組件里的prop:data逢倍，組件渲染出不同的內容捧颅。
根實例app中的方法change用來生成不同的數據，通過3個button來切換较雕。
該實例難理解的地方在于smart-item和3個功能組件都有prop:data碉哑，它們的傳遞順序和原理看起來比較含糊。
函數化組件在業(yè)務中并不是很常用亮蒋，而且也有其他類似的方法來實現扣典，比如上例也可以用組件的is特性來動態(tài)掛載∩骶粒總結起來贮尖，函數化組件主要適用于以下兩個場景：
1、程序化地在多個組件中選擇一個趁怔。
2湿硝、在將children,props,data 傳遞給子組件之前操作它們薪前。
效果圖：
用組件的is特性實現
<div id="app">
<component :is="view"></component>
<button @click="view='component1'">切換為圖片組件</button>
<button @click="view='component2'">切換為視頻組件</button>
<button @click="view='component3'">切換為文本組件</button>
</div>
<script>
Vue.component('component1',{
template:'<div><p>圖片組件</p><img src="https://raw.githubusercontent.com/iview/iview/master/assets/logo.png"></div>'
});
Vue.component('component2',{
template: '<div><p>視頻組件</p><video src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls" autoplay="autoplay"></video></div>'
});
Vue.component('component3',{
template: '<div><p>純文本組件</p><p>這是一段純文本</p></div>'
});
var app = new Vue({
el: '#app',
data: {
view: 'component1'
}
});
</script>
