(創(chuàng)作不易，感謝有你，你的支持，就是我前行的最大動(dòng)力，如果看完對(duì)你有幫助，請(qǐng)留下您的足跡）
目錄
組件的三大組成部分
注意點(diǎn)說(shuō)明
組件的樣式?jīng)_突 scoped
data 是一個(gè)函數(shù)
組件通信
什么是組件通信
不同的組件關(guān)系 和 組件通信方案分類(lèi) ?
父子通信流程圖：?
父 → 子
子 → 父?
什么是 prop
props 校驗(yàn)?
prop & data、單向數(shù)據(jù)流
進(jìn)階語(yǔ)法
v-model 原理
表單類(lèi)組件封裝 & v-model 簡(jiǎn)化代碼 ?
.sync 修飾符 ?
ref 和 $refs ?
組件的三大組成部分
注意點(diǎn)說(shuō)明
組件的樣式?jīng)_突 scoped
默認(rèn)情況 ：寫(xiě)在組件中的樣式會(huì) 全局生效 → 因此很容易造成多個(gè)組件之間的樣式?jīng)_突問(wèn)題。1. 全局樣式 : 默認(rèn)組件中的樣式會(huì)作用到全局2. 局部樣式 : 可以給組件加上 scoped 屬性, 可以讓樣式只作用于當(dāng)前組件scoped原理？1. 當(dāng)前組件內(nèi)標(biāo)簽都被添加 data-v-hash值 的屬性
2. css選擇器都被添加 [data-v-hash值] 的屬性選擇器
最終效果: 必須是當(dāng)前組件的元素 , 才會(huì)有這個(gè)自定義屬性, 才會(huì)被這個(gè)樣式作用到
data 是一個(gè)函數(shù)
一個(gè)組件的 data 選項(xiàng)必須是一個(gè) 函數(shù) ?！?保證每個(gè)組件實(shí)例，維護(hù) 獨(dú)立 的一份數(shù)據(jù)對(duì)象。每次創(chuàng)建新的組件實(shí)例，都會(huì)新執(zhí)行一次 data 函數(shù)，得到一個(gè)新對(duì)象。
<template>
<div class="base-count">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</template>
<script>
export default {
data() {
console.log('函數(shù)執(zhí)行了')
return {
count: 100,
}
},
}
</script>
<style>
.base-count {
margin: 20px;
}
</style><template>
<div class="app">
<baseCount></baseCount>
</div>
</template>
<script>
import baseCount from './components/BaseCount'
export default {
components: {
baseCount,
},
}
</script>
<style>
</style>
組件通信
什么是組件通信
組件通信, 就是指 組件與組件 之間的數(shù)據(jù)傳遞。
組件的數(shù)據(jù)是 獨(dú)立 的，無(wú)法直接訪問(wèn)其他組件的數(shù)據(jù)。想用其他組件的數(shù)據(jù) → 組件通信
不同的組件關(guān)系 和 組件通信方案分類(lèi) ?
組件關(guān)系分類(lèi)：1. 父子關(guān)系2. 非父子關(guān)系
組件通信解決方案： ?
父子通信流程圖：?
1. 父組件通過(guò) props 將數(shù)據(jù)傳遞給子組件2. 子組件利用 $emit 通知父組件修改更新
父 → 子
父組件通過(guò) props 將數(shù)據(jù)傳遞給子組件
子 → 父?
子組件利用 $emit 通知父組件，進(jìn)行修改更新
什么是 prop
Prop 定義： 組件上 注冊(cè)的一些 自定義屬性Prop 作用：向子組件傳遞數(shù)據(jù)特點(diǎn)：????????可以 傳遞 任意數(shù)量 的prop????????可以 傳遞 任意類(lèi)型 的prop
props 校驗(yàn)?
作用： 為組件的 prop 指定 驗(yàn)證要求 ，不符合要求，控制臺(tái)就會(huì)有 錯(cuò)誤提示 → 幫助開(kāi)發(fā)者，快速發(fā)現(xiàn)錯(cuò)誤語(yǔ)法：① 類(lèi)型校驗(yàn)② 非空校驗(yàn)③ 默認(rèn)值④ 自定義校驗(yàn)
prop & data、單向數(shù)據(jù)流
共同點(diǎn)：都可以給組件提供數(shù)據(jù)。區(qū)別：? data 的數(shù)據(jù)是 自己 的 → 隨便改? prop 的數(shù)據(jù)是 外部 的 → 不能直接改，要遵循 單向數(shù)據(jù)流單向數(shù)據(jù)流：父級(jí) prop 的數(shù)據(jù)更新，會(huì)向下流動(dòng)，影響子組件。這個(gè)數(shù)據(jù)流動(dòng)是單向的。
進(jìn)階語(yǔ)法
v-model 原理
原理： v-model本質(zhì)上是一個(gè) 語(yǔ)法糖 。例如應(yīng)用在 輸入框上，就是 value屬性 和 input事件 的合寫(xiě)。作用： 提供數(shù)據(jù)的雙向綁定① 數(shù)據(jù)變，視圖跟著變 :value② 視圖變，數(shù)據(jù)跟著變 @input注意： $event 用于在模板中，獲取事件的形參
表單類(lèi)組件封裝 & v-model 簡(jiǎn)化代碼 ?
1. 表單類(lèi)組件 封裝→ 實(shí)現(xiàn) 子組件 和 父組件數(shù)據(jù) 的雙向綁定文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-613081.html
① 父?jìng)髯樱?/span> 數(shù)據(jù) 應(yīng)該是父組件 props 傳遞 過(guò)來(lái)的， 拆解 v-model 綁定數(shù)據(jù)② 子傳父： 監(jiān)聽(tīng)輸入，子傳父?jìng)髦到o父組件修改
2. 父組件 v-model 簡(jiǎn)化代碼，實(shí)現(xiàn) 子組件 和 父組件數(shù)據(jù) 雙向綁定 文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-613081.html
① 子組件中：props 通過(guò) value 接收 ，事件觸發(fā) input② 父組件中： v-model 給組件直接綁數(shù)據(jù) ( :value + @input )
.sync 修飾符 ?
作用： 可以實(shí)現(xiàn) 子組件 與 父組件數(shù)據(jù) 的 雙向綁定 ，簡(jiǎn)化代碼特點(diǎn)： prop屬性名，可以 自定義 ，非固定為 value場(chǎng)景： 封裝彈框類(lèi)的基礎(chǔ)組件， visible屬性 true顯示 false隱藏本質(zhì)： 就是 :屬性名 和 @update:屬性名 合寫(xiě)
ref 和 $refs ?
作用： 利用 ref 和 $refs 可以用于 獲取 dom 元素, 或 組件實(shí)例
特點(diǎn)： 查找范圍 → 當(dāng)前組件內(nèi) (更精確穩(wěn)定)① 獲取 dom：????????1. 目標(biāo)標(biāo)簽 – 添加 ref 屬性<div ref="chartRef">我是渲染圖表的容器</div>????????2. 恰當(dāng)時(shí)機(jī), 通過(guò) this.$refs.xxx, 獲取目標(biāo)標(biāo)簽mounted () { console.log(this.$refs.chartRef) },② 獲取組件：????????1. 目標(biāo)組件 – 添加 ref 屬性<BaseForm ref="baseForm"></BaseForm>????????2. 恰當(dāng)時(shí)機(jī), 通過(guò) this.$refs.xxx, 獲取目標(biāo)組件，就可以 調(diào)用組件對(duì)象里面的方法this.$refs.baseForm.組件方法()
到了這里，關(guān)于前端Vue入門(mén)-day04-用vue實(shí)現(xiàn)組件通信的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
