functional 之 智能组件实现

应用场景：

函数化组件不常用，它应该应用于以下场景：

• 需要通过编程实现在多种组件中选择一种。
• children、props 或者 data 在传递给子组件之前，处理它们。

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');
   }

});

分析

1.首先定义了图片组件设置对象、视频组件设置对象以及文本组件设置对象，它们都以 data 作为入参。

2.函数化组件 smart-component，也以 data 作为入参。内部根据 get() 函数来判断需要渲染的组件类型。

3.函数化组件 smart-component 的 render 函数，以 get() 作为第一个参数；以 smart-component 所传入的 data，作为第二个参数：

return createElement(
	get(),
	{
		props: {
			data: context.props.data
		}
	},
	context.children
)

4.根实例 app 的 change 方法，根据输入的类型，来切换不同的组件所需要的数据。