Vue的函数化组件

函数化组件

Vue.js提供了一个 functional 的布尔值选项，设置为true可以使组件无状态和无实例，也就是没有 data 和 this上下文。

好处：只是一个函数，渲染开销要小很多。

使用函数化组件时，Render 函数提供了第二个参数 context 来提供临时上下文。 组件需要的data、props、slots、chidren、parent 都是通过这个上下文来传递的。

------- 这里插一段createElement的用法 ------

createElement(
	// {String | Object | Function}
	// 一个 HTML 标签，组件选项，或是一个函数
	// 必须 Return 上述其中一个
	'div',
	// {Object}
	// 一个对应属性的数据对象，可选
	{
   
		//	比如：
		// attrs: {} 正常的HTML特性
		// props: {} 组件props
		// domProps: {} DOM属性
		// on: {} 自定义事件监听器“on”
	},
	// {String | Array}
	[
		createElement('h1', 'hello world'),
		createElement(MyComponent, {
   
			props: {
   
				someProps: 'foo'
			}
		})
	]
)

------------- 分割线 -------------

函数化组件实例：

<div id='app'>
	<smart-item :data="data"></smart-item>
	<button @click="change('img')">切换为图片组件</button>
	<button