vue3組件化開(kāi)發(fā)常用API知識(shí)點(diǎn)總結(jié)
組件化思想
為什么使用組件化開(kāi)發(fā)?
當(dāng)前前端比較流行的 Vue React 等框架,都會(huì)通過(guò)編寫組件來(lái)完成業(yè)務(wù)需求,也就是組件化開(kāi)發(fā)。包括小程序開(kāi)發(fā)也會(huì)用到組件化開(kāi)發(fā)的思想。
分析組件化思想開(kāi)發(fā)應(yīng)用程序:
- 將一個(gè)完整頁(yè)面拆分成很多個(gè)小組件
- 每個(gè)組件用于完成頁(yè)面的一個(gè)功能模塊
- 每一個(gè)組件還可以細(xì)分 (父子組件)
- 通用的組件可以復(fù)用到不同的頁(yè)面
一個(gè) Vue 的頁(yè)面,應(yīng)該像是棵嵌套的組件樹(shù)的形式來(lái)組織:
vue3 入口文件:
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
createApp()
函數(shù)傳入了一個(gè)App
,App
就是一個(gè)組件,是項(xiàng)目的根組件。
下面將分析 Vue3 中組件化開(kāi)發(fā)的常用方法。
組件通訊
$props
$props
用于向子組件傳遞數(shù)據(jù)
<p> $props: {{$props}} </p>
<script setup>
語(yǔ)法糖中需要使用defineProps
Api獲取props
const props = defineProps({ num: Number, })
$emits
$emit
用于調(diào)用父級(jí)組件的方法
<button @click="$emit('add')"> add </button>
<script setup>
語(yǔ)法糖中需要使用defineEmits
Api聲明emits
<button @click="add">{{ num }}</button> const emits = defineEmits(['add']) function add() { emits('add') }
$parent
$parent
用于獲取父組件實(shí)例對(duì)象。
<script setup>
中組件實(shí)例不會(huì)暴露出來(lái),直接在模板中使用$parent
會(huì)返回一個(gè)空對(duì)象。
為了在 <script setup>
組件中明確要暴露出去的屬性,使用 defineExpose
編譯器宏:
const parData = ref("父組件數(shù)據(jù)"); defineExpose({ parData, })
子組件:
<p>父組件 parData: {{$parent.parData}}</p>
$attrs
- 包含了父作用域中不作為組件
props
或自定義事件的 attribute 綁定和事件。
子組件:
<Foo a="a" b="b" :num="num" @add="add" />
在父組件中,$attrs
的值就是 { "a": "a", "b": "b" }
。
- 當(dāng)一個(gè)組件沒(méi)有聲明任何 prop 時(shí),這里會(huì)包含所有父作用域的綁定,并且可以通過(guò)
v-bind="$attrs"
傳入內(nèi)部組件——這在創(chuàng)建高階的組件時(shí)會(huì)非常有用,舉個(gè)例子:
父組件:
<Bar :age=18 sex="boy" />
子組件 Bar.vue
<p v-bind="$attrs">將$attrs對(duì)象綁定到當(dāng)前標(biāo)簽</p>
在瀏覽器查看DOM,age 和 sex
作為屬性被綁定到了這個(gè)p
標(biāo)簽上面。
<script setup>
中,需要使用useAttrs
import { useAttrs } from 'vue'; const attrs = useAttrs(); console.log(attrs.sex); // boy
proviede & inject
- 用于跨層級(jí)/多層級(jí)的組件通信
- 父組件有一個(gè)
provide
選項(xiàng)來(lái)提供數(shù)據(jù),子組件有一個(gè)inject
選項(xiàng)來(lái)開(kāi)始使用這些數(shù)據(jù)。
父級(jí)組件:
provide("user", "kong"); provide("pass", 123456);
子孫級(jí)組件:
const user = inject("user"); const pass = inject("pass");
插槽 slot
用于內(nèi)容分發(fā),將 <slot>
元素作為承載分發(fā)內(nèi)容的出口。
SlotComp
組件
<template> <div :style="s1"> <slot name="head"></slot> </div> <div :style="s2"> <slot name="foot"></slot> </div> </template>
使用上面的組件
<SlotComp> <template v-slot:head> <p>head插槽</p> </template> <template v-slot:foot> <p>foot插槽</p> </template> </SlotComp>
SlotComp
組件中帶 name
屬性的 slot
插槽內(nèi)容,會(huì)被替換。被替換的內(nèi)容 需要在父組件中使用 v-slot
指令為插槽提供想要顯示的內(nèi)容。
渲染作用域
<template v-slot:foot> <p>foot插槽</p> {{msg}} {{items}} </template>
上面的例子,{{items}}
不會(huì)顯示數(shù)據(jù)。
父級(jí)模板里的所有內(nèi)容都是在父級(jí)作用域中編譯的;子模板里的所有內(nèi)容都是在子作用域中編譯的。
作用域插槽
讓插槽的內(nèi)容訪問(wèn)子組件才有的數(shù)據(jù):
<slot name="head" :item="items"></slot>
插槽內(nèi)容:
<template v-slot:head = "slotProps"> <p v-for="i in slotProps.item">{{i}}</p> </template>
綁定在 <slot>
元素上的 attribute 被稱為插槽 prop?,F(xiàn)在,在父級(jí)作用域中,我們可以使用帶值的 v-slot
來(lái)定義我們提供的插槽 prop 的名字,本例中就是slotProps
。
v-model
表單組件
- 將
v-model
應(yīng)用在表單上面,實(shí)現(xiàn)雙向綁定:
<input v-model="text" />
自定義組件
- 將
v-model
應(yīng)用在自定義組件上面:
父組件中使用自定義組件:
const msg = ref('hello world!'); <ModelComp v-model="msg"></ModelComp>
相當(dāng)于:
<ModelComp :modelValue="msg" @update:modelValue="msg = $event" > </ModelComp>
自定義組件ModelComp.vue
中:
const props = defineProps({ modelValue: String }) const emits = defineEmits([ "update:modelValue" ]) const text = ref("請(qǐng)輸入.."); // text改變時(shí)執(zhí)行 watch(text,()=>{ emits("update:modelValue",text.value); })
改變默認(rèn)參數(shù)
- 未設(shè)置參數(shù)時(shí)如上,默認(rèn)綁定的參數(shù)是
modelValue
update:modelValue
設(shè)置v-model
參數(shù):
<ModelComp v-model:show="show"></ModelComp>
相當(dāng)于:
<ModelComp :show="showFlag" @update:show="showFlag = $event" > </ModelComp>
自定義組件ModelComp.vue
中:
const props = defineProps({ show: Boolean }) const emits = defineEmits([ "update:show", ])
樣式綁定相關(guān)
class
class綁定:根據(jù)需求動(dòng)態(tài)綁定class樣式時(shí)可以使用一下幾種方法
寫法1:對(duì)象語(yǔ)法
<button @click="changeColor" :class="{ active: isActive }"> 點(diǎn)擊切換我的文體顏色樣式 </button> const isActive = ref(false); const changeColor = () => { isActive.value = !isActive.value; }
寫法2:對(duì)象語(yǔ)法
<button @click="changeColor2" :class="classObj"> 點(diǎn)擊切換顏色,根據(jù)計(jì)算屬性 </button> const isActive2 = reactive({ active: false, }) const classObj = computed(() => { return { active: isActive2.active, 'font-30': true, } }) const changeColor2 = () => { isActive2.active = !isActive2.active }
寫法3:數(shù)組語(yǔ)法
<div :class="[activeClass, errorClass]"></div>
三目運(yùn)算符寫法
<div :class="[isActive ? activeClass : '', errorClass]"></div>
數(shù)組語(yǔ)法中結(jié)合對(duì)象語(yǔ)法使用
<div :class="[{ active: isActive }, errorClass]"></div>
style
動(dòng)態(tài)綁定行內(nèi)style樣式
三種方式:html代碼
<p :style="{ color: colorRed }">style綁定</p>
<p :style="styleObj">style對(duì)象綁定(直接綁定到一個(gè)對(duì)象,代碼更清新)</p>
<p :style="[styleObj, styleObjRed]">style數(shù)組綁定</p>
js 代碼
const colorRed = ref('#f00') const styleObj = reactive({ fontSize: '30px', }) const styleObjRed = reactive({ color: '#f00', })
代碼demo地址 github.com/kongcodes/v…
總結(jié)
到此這篇關(guān)于vue3組件化開(kāi)發(fā)常用API知識(shí)點(diǎn)總結(jié)的文章就介紹到這了,更多相關(guān)vue3組件化開(kāi)發(fā)API內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue 進(jìn)階之實(shí)現(xiàn)父子組件間的傳值
這篇文章主要介紹了vue 進(jìn)階之實(shí)現(xiàn)父子組件間的傳值,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04解決vant-UI庫(kù)修改樣式無(wú)效的問(wèn)題
這篇文章主要介紹了解決vant-UI庫(kù)修改樣式無(wú)效的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue項(xiàng)目中引入vue-datepicker插件的詳解
這篇文章主要介紹了vue項(xiàng)目中引入vue-datepicker插件,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05關(guān)于net?6+vue?插件axios?后端接收參數(shù)問(wèn)題
接到這樣一個(gè)項(xiàng)目需求是這樣的,前端vue?必須對(duì)象傳遞后端也必須對(duì)象接收,接下來(lái)通過(guò)本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問(wèn)題,需要的朋友可以參考下2022-01-01vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件
本篇文章主要介紹了vue動(dòng)態(tài)生成dom并且自動(dòng)綁定事件,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-04-04vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車的復(fù)選框全選和反選功能
這篇文章主要介紹了vue+vant-UI框架實(shí)現(xiàn)購(gòu)物車的復(fù)選框全選和反選功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-11-11關(guān)于iview和elementUI組件樣式覆蓋無(wú)效問(wèn)題及解決
這篇文章主要介紹了關(guān)于iview和elementUI組件樣式覆蓋無(wú)效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09