一、函數(shù)式組件和普通組件的區(qū)別
二、組件函數(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)你需要做這些時：
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ù)對象。可選。 { // 與 `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é)點”。可選。 [ '先寫一些文字', createElement('h1', '一則頭條'), createElement(MyComponent, { props: { someProp: 'foobar' } }) ])總結(jié)
以上所述是小編給大家介紹的Vue函數(shù)式組件的應(yīng)用實例詳解,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
新聞熱點
疑難解答
