本篇文章給大家分享的是有關(guān)如何在Vue中使用函數(shù)式組件，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

站在用戶的角度思考問題，與客戶深入溝通，找到連云港網(wǎng)站設(shè)計(jì)與連云港網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名申請、雅安服務(wù)器托管、企業(yè)郵箱。業(yè)務(wù)覆蓋連云港地區(qū)。

一、函數(shù)式組件和普通組件的區(qū)別

• 渲染快

• 沒有實(shí)例，意味著沒有（this）

• 沒有生命周期（沒有響應(yīng)式數(shù)據(jù)）

二、組件函數(shù)的使用

1.以局部組件為例，將組件標(biāo)記為functional=ture;

因?yàn)楹瘮?shù)式?jīng)]有實(shí)例，因此組件需要的一切都是通過context參數(shù)傳遞，它是一個(gè)包括如下字段的對象：

• props：提供所有 prop 的對象children: VNode 子節(jié)點(diǎn)的數(shù)組slots: 一個(gè)函數(shù)，返回了包含所有插槽的對象scopedSlots: (2.6.0+) 一個(gè)暴露傳入的作用域插槽的對象。也以函數(shù)形式暴露普通插槽。data：傳遞給組件的整個(gè)數(shù)據(jù)對象，作為createElement的第二個(gè)參數(shù)傳入組件parent：對父組件的引用listeners: (2.3.0+) 一個(gè)包含了所有父組件為當(dāng)前組件注冊的事件監(jiān)聽器的對象。這是data.on的一個(gè)別名。injections: (2.3.0+) 如果使用了inject選項(xiàng)，則該對象包含了應(yīng)當(dāng)被注入的屬性。

在添加 functional: true 之后，需要更新我們的錨點(diǎn)標(biāo)題組件的渲染函數(shù)，為其增加 context參數(shù)，并將 this.$slots.default 更新為 context.children，然后將 this.level 更新為 context.props.level。

因?yàn)楹瘮?shù)式組件只是函數(shù)，所以渲染開銷也低很多。

在作為包裝組件時(shí)它們也同樣非常有用。比如，當(dāng)你需要做這些時(shí)：

• 程序化地在多個(gè)組件中選擇一個(gè)來代為渲染；

• 在將 children、props、data 傳遞給子組件之前操作它們。

data() {
    return {
      changer:1
    }
  },

components: {
    MyCmp:{
      functional:true,  //必要的設(shè)置
      render: function (createElement, context) {
        function getcomp(cmp){
          console.info(this); //輸出為undefined，證明沒有實(shí)例
          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) //這個(gè)組件為正常組件
  },
}
var comp2={
  props:['cmpData'],
  render:function(createElement,context){
    return createElement('el-button',{
      props:{
        type:this.cmpData
      }
    });
  },
  mounted() {
    console.log(this) //正常組件
  },
}

三、在父組件中使用

<ul id="caao0"><pre id="caao0"></pre></ul>