中文字幕av专区_日韩电影在线播放_精品国产精品久久一区免费式_av在线免费观看网站

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

如何在Vue中使用函數式組件

發布時間:2021-04-13 17:56:11 來源:億速云 閱讀:609 作者:Leah 欄目:web開發

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

一、函數式組件和普通組件的區別

  • 渲染快

  • 沒有實例,意味著沒有(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>

四、理解渲染函數的參數

接下來說一下createElement 接受的參數:

第一個參數:可以是  {String | Object | Function}

不管是那種類型,最終返回到都是需要渲染的普通DOM標簽,

第二個參數:是一個對象,這個參數是可選的,定義了需要渲染組件的參數,相對于普通HTML標簽的屬性是一樣的。

還可以自定義指令的,Vue特有的東西,只是抽象一些,沒有直接用Vue.directive()用起來直觀。

第三個參數:子級虛擬節點,如果你這個節點只是單節點,沒有嵌套節點,這個參數可以忽略。如果有的你就要使用一個數據數組的值位cerateElement()返回的虛擬節點。套路都是一樣的。

// @returns {VNode}
createElement(
 // {String | Object | Function}
 // 一個 HTML 標簽名、組件選項對象,或者
 // resolve 了上述任何一種的一個 async 函數。必填項。
 'div',
 // {Object}
 // 一個與模板中屬性對應的數據對象。可選。
 {
  // 與 `v-bind:class` 的 API 相同,
  // 接受一個字符串、對象或字符串和對象組成的數組
  'class': {
    foo: true,
    bar: false
  },
  // 與 `v-bind:style` 的 API 相同,
  // 接受一個字符串、對象,或對象組成的數組
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML 特性
  attrs: {
    id: 'foo'
  },
  // 組件 prop
  props: {
    myProp: 'bar'
  },
  // DOM 屬性
  domProps: {
    innerHTML: 'baz'
  },
  // 事件監聽器在 `on` 屬性內,
  // 但不再支持如 `v-on:keyup.enter` 這樣的修飾器。
  // 需要在處理函數中手動檢查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 僅用于組件,用于監聽原生事件,而不是組件內部使用
  // `vm.$emit` 觸發的事件。
  nativeOn: {
    click: this.nativeClickHandler
 },
 // 自定義指令。注意,你無法對 `binding` 中的 `oldValue`
 // 賦值,因為 Vue 已經自動為你進行了同步。
 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',
 // 如果你在渲染函數中給多個元素都應用了相同的 ref 名,
 // 那么 `$refs.myRef` 會變成一個數組。
 refInFor: true  
 },
 // {String | Array}
 // 子級虛擬節點 (VNodes),由 `createElement()` 構建而成,
 // 也可以使用字符串來生成“文本虛擬節點”。可選。
 [
  '先寫一些文字',
  createElement('h2', '一則頭條'),
  createElement(MyComponent, {
   props: {
    someProp: 'foobar'
   }
  })
 ]
)

以上就是如何在Vue中使用函數式組件,小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

vue
AI

六安市| 噶尔县| 镇远县| 阿巴嘎旗| 禄劝| 福泉市| 斗六市| 乌恰县| 花垣县| 白山市| 全州县| 林甸县| 丹寨县| 卢龙县| 连城县| 南木林县| 阿拉善右旗| 富平县| 平安县| 安新县| 从化市| 兴文县| 玉龙| 博客| 星座| 白银市| 土默特右旗| 周口市| 嘉黎县| 松潘县| 孙吴县| 宁陵县| 玉环县| 皮山县| 和田县| 江陵县| 介休市| 花莲县| 芮城县| 龙陵县| 朝阳县|