欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談Vue 函數(shù)式組件的使用技巧

 更新時(shí)間:2020年06月16日 09:22:14   作者:稻草叔叔  
這篇文章主要介紹了淺談Vue 函數(shù)式組件的使用技巧,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

什么是函數(shù)式組件

沒有管理任何狀態(tài),也沒有監(jiān)聽任何傳遞給它的狀態(tài),也沒有生命周期方法,它只是一個(gè)接受一些 prop 的函數(shù)。簡單來說是 一個(gè)無狀態(tài)和無實(shí)例的組件

基本寫法:

Vue.component('my-component', {
 functional: true,
 // Props 是可選的
 props: {
  // ...
 },
 // 為了彌補(bǔ)缺少的實(shí)例
 // 提供第二個(gè)參數(shù)作為上下文
 render: function(createElement, context) {
  // ...
 }
})

.vue 單文件組件寫法

<template functional>
 ...
</template>

因?yàn)楹瘮?shù)式組件沒有 this,參數(shù)就是靠 context 來傳遞的了,有如下字段的對象:

  • 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)被注入的 property。

使用技巧

以下總結(jié)、都是基于使用 <template> 標(biāo)簽開發(fā)函數(shù)式組件中遇到的問題

attr 與 listener 使用

平時(shí)我們在開發(fā)組件時(shí),傳遞 prop 屬性以及事件等操作,都會使用v-bind="$attrs"和 v-on="$listeners"。而在函數(shù)式組件的寫法有所不同,attrs屬性集成在 data中。

<template functional>
 <div v-bind="data.attrs" v-on="listeners">
  <h1>{{ props.title }}</h1>
 </div>
</template>

class 與 style 綁定

在引入函數(shù)式組件、直接綁定外層的class類名和style樣式是無效的。data.class 表示動態(tài)綁定class, data.staticClass 則表示綁定靜態(tài)class, data.staticClass 則是綁定內(nèi)聯(lián)樣式
TitleView.vue

<template functional>
 <div :class="[data.class, data.staticClass]" :style="data.staticStyle">
  <h1>{{ props.title }}</h1>
 </div>
</template>

Test.vue

<template>
 <title-view
  :class="{title-active: isActive}"
  style="{ color: red }"
  title="Hello Do"
 />
</template>

component 組件引入

函數(shù)式組件引入其他組件方式如下,具體參考:github.com/vuejs/vue/i…

<template functional>
 <div class="tv-button-cell">
  <component :is="injections.components.TvButton" type="info" />
  {{ props.title }}
  </component>
 </div>
</template>

<script>
import TvButton from '../TvButton'

export default {
 inject: {
  components: {
   default: {
    TvButton
   }
  }
 }
}
</script>

$options 計(jì)算屬性

有時(shí)候需要修改prop數(shù)據(jù)源, 使用 Vue 提供的 $options 屬性,可以訪問這個(gè)特殊的方法。

<template functional>
 <div v-bind="data.attrs" v-on="listeners">
  <h1>{{ $options.upadteName(props.title) }}</h1>
 </div>
</template>

<script>
 export default {
  updateName(val) {
   return 'hello' + val
  }
 }
</script>

總結(jié)

雖然速度和性能方面是函數(shù)式組件的優(yōu)勢、但不等于就可以濫用,所以還需要根據(jù)實(shí)際情況選擇和權(quán)衡。比如在一些展示組件。例如, buttons, tags, cards,或者頁面是靜態(tài)文本,就很適合使用函數(shù)式組件。

到此這篇關(guān)于淺談Vue 函數(shù)式組件的使用技巧的文章就介紹到這了,更多相關(guān)Vue 函數(shù)式組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家! 

相關(guān)文章

  • 詳解vue 項(xiàng)目白屏解決方案

    詳解vue 項(xiàng)目白屏解決方案

    這篇文章主要介紹了詳解vue 項(xiàng)目白屏解決方案,詳細(xì)的介紹了白屏的解決方案,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2018-10-10
  • vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動畫

    vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動畫

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)旋轉(zhuǎn)木馬動畫,圖片數(shù)量無限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-07-07
  • vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能

    vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能

    這篇文章主要介紹了vue實(shí)現(xiàn)element上傳多張圖片瀏覽刪除功能,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2023-10-10
  • vue-router懶加載的3種方式匯總

    vue-router懶加載的3種方式匯總

    這篇文章主要給大家介紹了關(guān)于vue-router懶加載的3種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-02-02
  • vue3父子組件傳值?雙向綁定及注意問題小結(jié)

    vue3父子組件傳值?雙向綁定及注意問題小結(jié)

    這篇文章主要介紹了Vue3中如何通過v-model實(shí)現(xiàn)父子組件的雙向數(shù)據(jù)綁定及利用computed簡化父子組件雙向綁定,本文結(jié)合示例代碼給大家講解的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn)

    Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn)

    這篇文章主要介紹了Vue3+TypeScript封裝axios并進(jìn)行請求調(diào)用的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2021-04-04
  • Vuex?localStorage的具體使用

    Vuex?localStorage的具體使用

    本文主要介紹了Vuex?localStorage的具體使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-05-05
  • vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例

    vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例

    今天小編就為大家分享一篇vue.js添加一些觸摸事件以及安裝fastclick的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • Vue3基礎(chǔ)安裝以及配置詳解

    Vue3基礎(chǔ)安裝以及配置詳解

    這篇文章主要介紹了Vue3基礎(chǔ)安裝以及配置詳解,需要的朋友可以參考下
    2023-01-01
  • Vue 瑩石攝像頭直播視頻實(shí)例代碼

    Vue 瑩石攝像頭直播視頻實(shí)例代碼

    本文通過實(shí)例代碼給大家介紹了vue 瑩石攝像頭直播視頻功能,文章還給大家提到了vue h5項(xiàng)目調(diào)用手機(jī)攝像頭錄像并上傳的功能,需要的朋友可以參考下
    2018-08-08

最新評論