說說 Vue.js 中的 functional 函數化組件

Vue.js 組件提供了一個 functional 開關，設置爲 true 後，就能夠讓組件變爲無狀態、無實例的函數化組件。由於只是函數，因此渲染的開銷相對來講，較小。

函數化的組件中的 Render 函數，提供了第二個參數 context 做爲上下文，data、props、slots、children 以及 parent 均可以經過 context 來訪問。

1 示例

這裏，咱們用 functional 函數化組件來實現一個智能組件。

html：

<div id="app">
    <smart-component :data="data"></smart-component>
    <button @click="change('img')">圖片組件</button>
    <button @click="change('video')">視頻組件</button>
    <button @click="change('text')">文本組件</button>
</div>
複製代碼

js：

//圖片組件設置
var imgOptions = {
	props: ['data'],
	render: function (createElement) {
		return createElement('div', [
			createElement('p', '圖片組件'),
			createElement('img', {
				attrs: {
					src: this.data.url,
					height: 300,
					weight: 400

				}
			})
		]);
	}
};

//視頻組件設置
var videoOptions = {
	props: ['data'],
	render: function (createElement) {
		return createElement('div', [
			createElement('p', '視頻組件'),
			createElement('video', {
				attrs: {
					src: this.data.url,
					controls: 'controls',
					autoplay: 'autoplay'
				}
			})
		]);
	}
};

//文本組件設置
var textOptions = {
	props: ['data'],
	render: function (createElement) {
		return createElement('div', [
			createElement('p', '文本組件'),
			createElement('p', this.data.content)
		]);
	}
};

Vue.component('smart-component', {
	//設置爲函數化組件
	functional: true,
	render: function (createElement, context) {
		function get() {
			var data = context.props.data;

			console.log("smart-component/type:" + data.type);
			//判斷是哪種類型的組件
			switch (data.type) {
				case 'img':
					return imgOptions;
				case 'video':
					return videoOptions;
				case 'text':
					return textOptions;
				default:
					console.log("data 類型不合法：" + data.type);
			}
		}

		return createElement(
			get(),
			{
				props: {
					data: context.props.data
				}
			},
			context.children
		)
	},
	props: {
		data: {
			type: Object,
			required: true
		}
	}
})

var app = new Vue({
	el: '#app',
	data: {
		data: {}
	},
	methods: {
		change: function (type) {
			console.log("輸入類型：" + type);
			switch (type) {
				case 'img':
					this.data = {
						type: 'img',
						url: 'http://pic-bucket.ws.126.net/photo/0001/2019-02-07/E7D8PON900AO0001NOS.jpg'
					}
					break;
				case 'video':
					this.data = {
						type: 'video',
						url: 'http://wxapp.cp31.ott.cibntv.net/6773887A7F94A71DF718E212C/03002002005B836E73A0C5708529E09C1952A1-1FCF-4289-875D-AEE23D77530D.mp4?ccode=0517&duration=393&expire=18000&psid=bbd36054f9dd2b21efc4121e320f05a0&ups_client_netip=65600b48&ups_ts=1549519607&ups_userid=21780671&utid=eWrCEmi2cFsCAWoLI41wnWhW&vid=XMzc5OTM0OTAyMA&vkey=A1b479ba34ca90bcc61e3d6c3b2da5a8e&iv=1&sp='
					}
					break;
				case 'text':
					this.data = {
						type: 'text',
						content: '《流浪地球》中的科學：太陽什麼時候吞併地球？科學家已經給出時間表'
					}
					break;
				default:
					console.log("data 類型不合法：" + type);
			}

		}
	},
	created: function () {
		//默認爲圖片組件
		this.change('img');
	}

});
複製代碼

效果：

• 首先定義了圖片組件設置對象、視頻組件設置對象以及文本組件設置對象，它們都以 data 做爲入參。
• 函數化組件 smart-component，也以 data 做爲入參。內部根據 get() 函數來判斷須要渲染的組件類型。
• 函數化組件 smart-component 的 render 函數，以 get() 做爲第一個參數；以 smart-component 所傳入的 data，做爲第二個參數：

return createElement(
	get(),
	{
		props: {
			data: context.props.data
		}
	},
	context.children
)
複製代碼

• 根實例 app 的 change 方法，根據輸入的類型，來切換不一樣的組件所須要的數據。

2 應用場景

函數化組件不經常使用，它應該應用於如下場景：

• 須要經過編程實如今多種組件中選擇一種。
• children、props 或者 data 在傳遞給子組件以前，處理它們。

---

本文示例代碼