一、函數式組件和普通組件的區別
渲染快 沒有實例，意味著沒有（this） 沒有生命周期（沒有響應式數據）二、組件函數的使用
1.以局部組件為例，將組件標記為functional=ture;
因為函數式沒有實例，因此組件需要的一切都是通過context參數傳遞，它是一個包括如下字段的對象：
props：提供所有 prop 的對象children: VNode 子節點的數組slots: 一個函數，返回了包含所有插槽的對象scopedSlots: (2.6.0+) 一個暴露傳入的作用域插槽的對象。也以函數形式暴露普通插槽。data：傳遞給組件的整個數據對象，作為createElement的第二個參數傳入組件parent：對父組件的引用listeners: (2.3.0+) 一個包含了所有父組件為當前組件注冊的事件監聽器的對象。這是data.on的一個別名。injections: (2.3.0+) 如果使用了inject選項，則該對象包含了應當被注入的屬性。在添加 functional: true 之后，需要更新我們的錨點標題組件的渲染函數，為其增加 context參數，并將 this.$slots.default 更新為 context.children，然后將 this.level 更新為 context.props.level。
因為函數式組件只是函數，所以渲染開銷也低很多。
在作為包裝組件時它們也同樣非常有用。比如，當你需要做這些時：
程序化地在多個組件中選擇一個來代為渲染； 在將 children、props、data 傳遞給子組件之前操作它們。data() { return { changer:1 } },components: { MyCmp:{ functional:true, //必要的設置 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 //為子組件傳遞數據 } } ); },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>
新聞熱點
疑難解答
圖片精選
