建站
咨詢
售后
建站咨詢
新聞中心
Vue.js 組件提供了一個(gè) functional 開關(guān)，設(shè)置為 true 后，就可以讓組件變?yōu)闊o狀態(tài)、無實(shí)例的函數(shù)化組件。因?yàn)橹皇呛瘮?shù)，所以渲染的開銷相對(duì)來說，較小。
專注于為中小企業(yè)提供做網(wǎng)站、網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)建甌免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
函數(shù)化的組件中的 Render 函數(shù)，提供了第二個(gè)參數(shù) context 作為上下文，data、props、slots、children 以及 parent 都可以通過 context 來訪問。
1 示例
這里，我們用 functional 函數(shù)化組件來實(shí)現(xiàn)一個(gè)智能組件。
html：
js：
//圖片組件設(shè)置
var imgOptions = {
props: ['data'],
render: function (createElement) {
return createElement('div', [
createElement('p', '圖片組件'),
createElement('img', {
attrs: {
src: this.data.url,
height: 300,
weight: 400
}
})
]);
}
};
//視頻組件設(shè)置
var videoOptions = {
props: ['data'],
render: function (createElement) {
return createElement('div', [
createElement('p', '視頻組件'),
createElement('video', {
attrs: {
src: this.data.url,
controls: 'controls',
autoplay: 'autoplay'
}
})
]);
}
};
//文本組件設(shè)置
var textOptions = {
props: ['data'],
render: function (createElement) {
return createElement('div', [
createElement('p', '文本組件'),
createElement('p', this.data.content)
]);
}
};
Vue.component('smart-component', {
//設(shè)置為函數(shù)化組件
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: '《流浪地球》中的科學(xué)：太陽何時(shí)吞并地球？科學(xué)家已經(jīng)給出時(shí)間表'
}
break;
default:
console.log("data 類型不合法：" + type);
}
}
},
created: function () {
//默認(rèn)為圖片組件
this.change('img');
}
});效果：
- 首先定義了圖片組件設(shè)置對(duì)象、視頻組件設(shè)置對(duì)象以及文本組件設(shè)置對(duì)象，它們都以 data 作為入?yún)ⅰ?/li>
- 函數(shù)化組件 smart-component，也以 data 作為入?yún)ⅰ?nèi)部根據(jù) get() 函數(shù)來判斷需要渲染的組件類型。
- 函數(shù)化組件 smart-component 的 render 函數(shù)，以 get() 作為第一個(gè)參數(shù)；以 smart-component 所傳入的 data，作為第二個(gè)參數(shù)：
return createElement(
get(),
{
props: {
data: context.props.data
}
},
context.children
)
根實(shí)例 app 的 change 方法，根據(jù)輸入的類型，來切換不同的組件所需要的數(shù)據(jù)。
2 應(yīng)用場(chǎng)景
函數(shù)化組件不常用，它應(yīng)該應(yīng)用于以下場(chǎng)景：
- 需要通過編程實(shí)現(xiàn)在多種組件中選擇一種。
- children、props 或者 data 在傳遞給子組件之前，處理它們。
本文示例代碼
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
新聞標(biāo)題：說說Vue.js中的functional函數(shù)化組件的使用
本文URL：http://www.dlmjj.cn/article/pephoh.html
