Vue.js组件提供了一个功能的开关，设置为真实的后，就可以让组件变为无状态、无实例的函数化组件。因为只是函数，所以渲染的开销相对来说，较小。

函数化的组件中的提出函数，提供了第二个参数语境作为上下文、数据、道具、老虎机、儿童以及父母都可以通过语境来访问。

一示例

这里，我们用功能的函数化组件来实现一个智能组件。

html:

div id=' app '智能组件：数据=' data '/智能组件按钮@ click=' change '(' img ')图片组件/button button @ click=' change(' video ')视频组件/button button @ click=' change '(文本)文本组件/button/divjs:

//图片组件设置var imgOptions={ prop s :[' data ']，render:函数(CreateElement){返回CreateElement(' div '，[ createElement('p '，'图片组件)，createElement('img '，{ attrs : { src : this。数据。URL，高： 300，重3360 400 } })))；}};//视频组件设置var视频选项={ prop s :['数据']，render:函数(CreateElement){返回CreateElement(' div '，[ createElement('p '，'视频组件)，createElement('video '，{ attrs : { src : this。数据。URL，controls: 'controls '，autoplay : ' autoplay ' } })])；}};//文本组件设置var textOptions={ prop s :[' data ']，render:函数(CreateElement){返回CreateElement(' div '，[ createElement('p '，'文本组件)，createElement('p '，这个。数据。内容)]；}};Vue.component('smart-component '，{ //设置为函数化组件functional: true，render : function(CreateElement，context){ function get(){ var data=context。道具。数据；控制台。日志('智能组件/类型： '数据。类型)；//判断是哪一种类型的组件开关(数据。type){ case ' img ' :返回图像案例'视频':返回视频选项大小写【正文】:返回textoptions default : console . log('数据类型不合法：'数据。类型)；} }返回createElement(get()，{ prop : { data :上下文。道具。data } }，context.children ) }，prop : { data : { type : Object，必选： true } })var app=new Vue({ El : ' # app '，data: { data: { }，methods : { change 3: function(type){ console(' log .输入类型：' '类型);开关(类型){ case ' img ' : this。数据={ type : ' img '，URL : ' http://pic-bucket。ws。126 .net/photo/0001/2019-02-07/e7d 8 pon 900 ao 0001 nos . jpg ' } break；案例'视频' :这个。数据={ type : ' video '，URL : ' http://wxapp。cp31。奥特。cibntv。net/6773887 a7 f 94 a 71 df 718 e 212 c/03002002005 b 836 e 73 A0 c 5708529 e 09 c 1952 a 1-1 fcf-4289-875d-aee 23d 7530d .ccode=0517 duration=393 expire=18000 psid=bbd 36054 F9 DD 2 b 21 ef c 4121 e 320 f 05 a 0 ups _ client _ netip=65600 b 48 ups _ ts=1549519607 ups _ userid=21780671 utid=ewrcemi2cfscawoli 41 wnwhwvid=xmzc 50t m0 otaymavkey=a1b 41数据={ type : ' text '，content: ' 《流浪地球》中的科学：太阳何时吞并地球？科学家已经给出时间表} breakdefault: console.log('数据类型不合法：' '类型);} } }，created: function () { //默认为图片组件这个。变更(' img ')；}});效果：

首先定义图片成分设置对象、视频成分设置对象和文本成分设置对象，它们都以数据作为输入参数。功能组件智能组件也将数据作为输入参数。在内部，根据get()函数判断要渲染的组件类型。功能组件smart-component的render函数将get()作为第一个参数；以smart-component传入的数据为第二个参数：return createelement (get()，{ prop : context . props . data } }，context.children)，根实例app的change方法根据输入类型切换不同组件所需的数据。

2个应用场景

功能化组件不常用，但应适用于以下情况：

需要通过编程选择各种组件之一。在传递给子组件之前，会处理子组件、道具或数据。本文中的示例代码

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。