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'); }});效果：
return createElement( get(), { props: { data: context.props.data } }, context.children)
根實例 app 的 change 方法，根據輸入的類型，來切換不同的組件所需要的數據。
2 應用場景
函數化組件不常用，它應該應用于以下場景：
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
