說說 Vue.js 中的 functional 函式化元件
摘要：
Vue.js 元件提供了一個 functional 開關，設定為 true 後，就可以讓元件變為無狀態、無例項的函式化元件。因為只是函式，所以渲染的開銷相對來說，較小。
函式化的元件中的 Render 函式，提供了第二個引數 context 作為上下文，data、pro...
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 在傳遞給子元件之前，處理它們。