Vue函數(shù)式組件的應(yīng)用實例詳解
一、函數(shù)式組件和普通組件的區(qū)別
- 渲染快
- 沒有實例,意味著沒有(this)
- 沒有生命周期(沒有響應(yīng)式數(shù)據(jù))
二、組件函數(shù)的使用
1.以局部組件為例,將組件標(biāo)記為functional=ture;
因為函數(shù)式?jīng)]有實例,因此組件需要的一切都是通過context參數(shù)傳遞,它是一個包括如下字段的對象:
props:提供所有 prop 的對象children: VNode 子節(jié)點的數(shù)組slots: 一個函數(shù),返回了包含所有插槽的對象scopedSlots: (2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數(shù)形式暴露普通插槽。data:傳遞給組件的整個數(shù)據(jù)對象,作為createElement的第二個參數(shù)傳入組件parent:對父組件的引用listeners: (2.3.0+) 一個包含了所有父組件為當(dāng)前組件注冊的事件監(jiān)聽器的對象。這是data.on的一個別名。injections: (2.3.0+) 如果使用了inject選項,則該對象包含了應(yīng)當(dāng)被注入的屬性。
在添加 functional: true 之后,需要更新我們的錨點標(biāo)題組件的渲染函數(shù),為其增加 context參數(shù),并將 this.$slots.default 更新為 context.children,然后將 this.level 更新為 context.props.level。
因為函數(shù)式組件只是函數(shù),所以渲染開銷也低很多。
在作為包裝組件時它們也同樣非常有用。比如,當(dāng)你需要做這些時:
- 程序化地在多個組件中選擇一個來代為渲染;
- 在將 children、props、data 傳遞給子組件之前操作它們。
data() {
return {
changer:1
}
},
components: {
MyCmp:{
functional:true, //必要的設(shè)置
render: function (createElement, context) {
function getcomp(cmp){
console.info(this); //輸出為undefined,證明沒有實例
if(cmp==1){
return comp1;
}else{
return comp2
}
}
return createElement(getcomp(context.props.changer),
{
props:{
cmpData:context.props.data //為子組件傳遞數(shù)據(jù)
}
}
);
},
2. 定義要渲染的組件
var comp1={
props:['cmpData'],
render:function(createElement,context){
return createElement('el-input',{
props:{
type:this.cmpData
}
});
},
mounted() {
console.log(this) //這個組件為正常組件
},
}
var comp2={
props:['cmpData'],
render:function(createElement,context){
return createElement('el-button',{
props:{
type:this.cmpData
}
});
},
mounted() {
console.log(this) //正常組件
},
}
三、在父組件中使用
<template>
<div>
<el-input v-model="changer" placeholder="子組件"></el-input>
<my-cmp :changer="changer"></my-cmp>
</div>
</template>
<script>
四、理解渲染函數(shù)的參數(shù)
接下來說一下createElement 接受的參數(shù):
第一個參數(shù):可以是 {String | Object | Function}
不管是那種類型,最終返回到都是需要渲染的普通DOM標(biāo)簽,
第二個參數(shù):是一個對象,這個參數(shù)是可選的,定義了需要渲染組件的參數(shù),相對于普通HTML標(biāo)簽的屬性是一樣的。
還可以自定義指令的,Vue特有的東西,只是抽象一些,沒有直接用Vue.directive()用起來直觀。
第三個參數(shù):子級虛擬節(jié)點,如果你這個節(jié)點只是單節(jié)點,沒有嵌套節(jié)點,這個參數(shù)可以忽略。如果有的你就要使用一個數(shù)據(jù)數(shù)組的值位cerateElement()返回的虛擬節(jié)點。套路都是一樣的。
// @returns {VNode}
createElement(
// {String | Object | Function}
// 一個 HTML 標(biāo)簽名、組件選項對象,或者
// resolve 了上述任何一種的一個 async 函數(shù)。必填項。
'div',
// {Object}
// 一個與模板中屬性對應(yīng)的數(shù)據(jù)對象??蛇x。
{
// 與 `v-bind:class` 的 API 相同,
// 接受一個字符串、對象或字符串和對象組成的數(shù)組
'class': {
foo: true,
bar: false
},
// 與 `v-bind:style` 的 API 相同,
// 接受一個字符串、對象,或?qū)ο蠼M成的數(shù)組
style: {
color: 'red',
fontSize: '14px'
},
// 普通的 HTML 特性
attrs: {
id: 'foo'
},
// 組件 prop
props: {
myProp: 'bar'
},
// DOM 屬性
domProps: {
innerHTML: 'baz'
},
// 事件監(jiān)聽器在 `on` 屬性內(nèi),
// 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
// 需要在處理函數(shù)中手動檢查 keyCode。
on: {
click: this.clickHandler
},
// 僅用于組件,用于監(jiān)聽原生事件,而不是組件內(nèi)部使用
// `vm.$emit` 觸發(fā)的事件。
nativeOn: {
click: this.nativeClickHandler
},
// 自定義指令。注意,你無法對 `binding` 中的 `oldValue`
// 賦值,因為 Vue 已經(jīng)自動為你進(jìn)行了同步。
directives: [
{
name: 'my-custom-directive',
value: '2',
expression: '1 + 1',
arg: 'foo',
modifiers: {
bar: true
}
}
],
// 作用域插槽的格式為
// { name: props => VNode | Array<VNode> }
scopedSlots: {
default: props => createElement('span', props.text)
},
// 如果組件是其它組件的子組件,需為插槽指定名稱
slot: 'name-of-slot',
// 其它特殊頂層屬性
key: 'myKey',
ref: 'myRef',
// 如果你在渲染函數(shù)中給多個元素都應(yīng)用了相同的 ref 名,
// 那么 `$refs.myRef` 會變成一個數(shù)組。
refInFor: true
},
// {String | Array}
// 子級虛擬節(jié)點 (VNodes),由 `createElement()` 構(gòu)建而成,
// 也可以使用字符串來生成“文本虛擬節(jié)點”??蛇x。
[
'先寫一些文字',
createElement('h1', '一則頭條'),
createElement(MyComponent, {
props: {
someProp: 'foobar'
}
})
]
)
總結(jié)
以上所述是小編給大家介紹的Vue函數(shù)式組件的應(yīng)用實例詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
vue+element?tree懶加載更新數(shù)據(jù)的示例代碼
這篇文章主要介紹了vue+element?tree懶加載更新數(shù)據(jù),文中給大家補(bǔ)充介紹了Vue Element Ui 樹形表懶加載新增、修改、刪除等操作后局部數(shù)據(jù)更新的詳細(xì)代碼,感興趣的朋友跟隨小編一起看看吧2022-09-09
解決electron打包vue-element-admin項目頁面無法跳轉(zhuǎn)的問題小結(jié)
這篇文章主要介紹了解決electron打包vue-element-admin項目頁面無法跳轉(zhuǎn)的問題小結(jié),本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-03-03
Vue Echarts實現(xiàn)柱形圖從右向左滾動效果
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echarts實現(xiàn)柱形圖從右向左滾動的效果,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-05-05
Ant?Design?Vue?修改表格頭部樣式的詳細(xì)代碼
這篇文章主要介紹了Ant?Design?Vue?修改表格頭部樣式,首先用到的是customHeaderRow這個API,類型是一個函數(shù),本文通過完整代碼給大家詳細(xì)講解,需要的朋友可以參考下2022-10-10

