您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue如何實(shí)現(xiàn)函數(shù)式組件,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
函數(shù)式組件
函數(shù)式組件,即無狀態(tài),無法實(shí)例化,內(nèi)部沒有任何生命周期處理方法,非常輕量,因而渲染性能高,特別適合用來只依賴外部數(shù)據(jù)傳遞而變化的組件。
寫法如下:
1.在template標(biāo)簽里面標(biāo)明functional
2.只接受props值
3.不需要script標(biāo)簽
<!-- App.vue --> <template> <div id="app"> <List :items="['Wonderwoman', 'Ironman']" :item-click="item => (clicked = item)" /> <p>Clicked hero: {{ clicked }}</p> </div> </template> <script> import List from "./List"; export default { name: "App", data: () => ({ clicked: "" }), components: { List } }; </script> <!-- List.vue 函數(shù)式組件 --> <template functional> <div> <p v-for="item in props.items" @click="props.itemClick(item);"> {{ item }} </p> </div> </template>
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“vue如何實(shí)現(xiàn)函數(shù)式組件”這篇文章對大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。