props
父組件向子組件傳值
//父組件
<template>
<home-child :name="name"/>
</template>
<script>
data() {
return {
name: 'harry'
}
},
</script>
//子組件
<template>
<div>父組件傳來的值Name：{{name}}</div>
</template>
<script>
props: {
name: String
}
</script>
image.png
依賴注入
當組件層級過深時媚创，props就會比較麻煩渗钉，需要一層一層傳遞，這時我們可以使用依賴注入钞钙，一個父組件相對于其所有的后代組件鳄橘，會作為依賴提供者。任何后代的組件樹芒炼，無論層級有多深瘫怜，都可以注入由父組件提供給整條鏈路的依賴。
- Provide (供給)
要為組件后代供給數(shù)據(jù)本刽，需要使用到provide選項
（為配合響應性鲸湃，我們可將供給的值轉(zhuǎn)換為一個計算屬性） - Inject (注入)
要注入祖先組件供給的數(shù)據(jù)，需使用inject選項
注入可設置別名和默認值
//父組件
export default {
provide: {
message: 'hello'
}
}
//子組件
<template>
<div>依賴注入傳遞歸來的值message：{{message}}</div>
</template>
export default {
inject: ['message']
}
image.png
$emit
在組件的模板表達式中子寓，可以直接使用$emit函數(shù)觸發(fā)自定義事件
$emit函數(shù)同樣也是組件實例上的方法：this.$emit()
父組件可以通過 v-on (縮寫為 @) 來監(jiān)聽事件
//父組件
<template>
<home-child @btnClick = 'btnClick'/>
</template>
export default {
methods: {
btnClick() {
alert('觸發(fā)事件')
}
}
}
//子組件
<template>
<div class="box" @click="btnClick"></div>
</template>
export default {
emits: ['btnClick'], //顯示的聲明要觸發(fā)的事件
methods: {
btnClick() {
this.$emit('btnClick')
}
}
}
image.png
ref
- ref 是一個特殊的 attribute暗挑，它允許我們在一個特定的 DOM 元素或子組件實例被掛載后，獲得對它的直接引用
- 只可以在組件掛載后才能訪問 ref
- 如果一個子組件使用的是選項式 API 斜友，被引用的組件實例和該子組件的 this 完全一致窿祥，這意味著父組件對子組件的每一個屬性和方法都有完全的訪問權。這使得在父組件和子組件之間創(chuàng)建緊密耦合的實現(xiàn)細節(jié)變得很容易蝙寨，當然也因此晒衩，應該只在絕對需要時才使用組件引用。大多數(shù)情況下墙歪，你應該首先使用標準的 props 和 emit 接口來實現(xiàn)父子組件交互
//父組件
<template>
<home-child ref= 'home_child'/>
</template>
export default {
mounted() {
let child = this.$refs.home_child //拿到子組件的實例
console.log(child.age); //11 訪問子組件的屬性
}
}
//子組件
export default {
data() {
return {
age: 11
}
}
}
vuex
如果業(yè)務邏輯復雜听系，很多組件需要處理一些相同的信息，采用普通的方式就會處理困難虹菲，vuex可以幫助我們把一些公共的數(shù)據(jù)抽離出來靠胜，便于其他組件處理，變更狀態(tài)
setup()
vue3提供了一種新方法來進行組件之間的數(shù)據(jù)傳遞setup()
我們在組件中用到的數(shù)據(jù)和方法，都定義在setup配置項中
//子組件
<template>
<div class="home-child">
<h4>子組件</h4>
<div>父組件傳來的值: {{title}}</div>
<button @click="btnClick">向父組件說話</button>
</div>
</template>
<script>
export default {
name: 'HomeChild',
props: {
title: String
},
setup(props, {emit}) {
let ask = '我是子組件浪漠，我向父組件說話'
const btnClick = () => {
emit('btnClick', ask)
}
return {
btnClick
}
}
}
</script>
//父組件
<template>
<div id="home">
<h3>父組件</h3>
<div>子組件說：{{children_mes}}</div>
<home-child :title="title" @btnClick='btnClick'/>
</div>
</template>
<script>
import { ref } from 'vue'
import HomeChild from './childComps/HomeChild.vue'
export default {
name: 'Home',
components: {HomeChild},
setup() {
let title = '我是父組件傳來的值'
let children_mes = ref('')
const btnClick = mes => {
children_mes.value = mes
}
return {
title,
children_mes,
btnClick
}
}
}
</script>
image.png
當點擊按鈕時陕习，子組件向父組件發(fā)送信息
image.png
