vue父子組件進(jìn)行通信方式原來(lái)是這樣的
在vue中如何實(shí)現(xiàn)父子組件通信，本篇博客將會(huì)詳細(xì)介紹父子組件通信的流程。
如圖所示，父組件向子組件傳遞數(shù)據(jù)，可以通過(guò)props，子組件向父組件傳遞數(shù)據(jù)可以通過(guò)觸發(fā)事件來(lái)進(jìn)行。
一、props
父組件向子組件傳遞的數(shù)據(jù)，通過(guò)props進(jìn)行傳遞，我們可以把props理解為屬性。props傳遞存在兩種格式，一種是數(shù)組格式，另一種是對(duì)象類型格式。其中第二種對(duì)象類型可以設(shè)置是否為必須數(shù)據(jù)，以及是否存在默認(rèn)值數(shù)據(jù)。
第一種用法：數(shù)組
//父組件 <HelloWorld :title="title"></HelloWorld> //子組件 props: ["title"],
第二種用法:對(duì)象
//父組件：
<HelloWorld :title="title"></HelloWorld>
//子組件：
props: {
title:{
type:String,
required:true,
default() {
return "我是title"
}
}
},
//上面default為什么是一個(gè)函數(shù)？
因?yàn)槭且粋€(gè)組件，組件在其他組件都能使用，并且如果default是一個(gè)key;value形式，并且value是一個(gè)引用
類型的值，則如果要更改props的值，則其他組件的值也會(huì)更改。
type屬性的類型有哪些？
type屬性的類型有:String,Number,Boolean,Array,Object,Date, Function,Symbol。
三、對(duì)象類型的其他寫(xiě)法
props:{
messageinfo:String,
propsA:Number，
propsC:{
type:String,
required:true
},
propsE:{
type:Object,
default(){
return {message:"hello"}
}
},
//自定義驗(yàn)證函數(shù)
title:{
validator(value) {
console.log("hhh")
return ["hello","world"].includes(value)
}
}
}
二、細(xì)節(jié)三props大小寫(xiě)命名
在props名使用駝峰命名，則可以使用-連接
//父組件
<HelloWorld :mess-age="title"></HelloWorld>
//子組件
props: {
messAge:{
type:String,
}
},
三、非props的attributes屬性
如果在父組件中設(shè)置attributes，但是在子組件中的props不存在該屬性，則如果子組件存在根節(jié)點(diǎn)，則就會(huì)該屬性就會(huì)繼承到根節(jié)點(diǎn)上。
如果我們不希望根節(jié)點(diǎn)繼承，可以使用inhertAttrs:false,這樣就可以繼承到非根節(jié)點(diǎn)上。
<template>
<div>{{ messAge }}
<h1 :class="$attrs.class">hhhhh</h1>
</div>
</template>
如果要是存在多個(gè)根節(jié)點(diǎn)，則就會(huì)顯示warning，表示不能自動(dòng)繼承,此時(shí)我們可以使用$attrs.屬性名來(lái)實(shí)現(xiàn)繼承屬性。
<template>
<h1>{{ messAge }}</h1>
<h1>哈哈哈</h1>
<h1 :class="$attrs.class">呵呵呵</h1>
</template>
四、子組件傳遞給父組件
1、當(dāng)子組件有一些事情發(fā)生的時(shí)候，比如在組件中發(fā)生點(diǎn)擊，父組件需要切換內(nèi)容。2 2、子組件有一些內(nèi)容想要傳遞給父組件。 3、子組件通過(guò)$emit()觸發(fā)事件，并且在emits中進(jìn)行注冊(cè)事件。 4、注冊(cè)的事件可以是數(shù)組類型的，也可以是對(duì)象類型。
五、簡(jiǎn)單例子
數(shù)組格式
//子組件
<template>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</template>
<script>
export default {
emits:["add", "sub"],
data() {
return {
}
},
methods: {
increment: function () {
this.$emit("add")
},
decrement: function () {
this.$emit("sub")
},
},
};
</script>
<style scoped></style>
//父組件
<template>
<h1>當(dāng)前的數(shù)字是:{{counter}}</h1>
<HelloWorld @add="addOne" @sub="subOne"></HelloWorld>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
components: { HelloWorld },
data() {
return {
counter: 0
}
},
methods:{
addOne() {
this.counter++
},
subOne() {
this.counter--
}
}
}
</script>
<style scoped></style>
數(shù)組格式：如果我們想要設(shè)置自定義事件，可以使用emits:["add", "sub"],數(shù)組格式。
對(duì)象格式：主要是針對(duì)需要向父組件傳遞參數(shù)的例子.
//父組件
<template>
<h1>當(dāng)前的數(shù)字是:{{counter}}</h1>
<HelloWorld @add="addOne" @sub="subOne" @addN="addNumbers"></HelloWorld>
</template>
<script>
import HelloWorld from "./components/HelloWorld.vue"
export default {
components: { HelloWorld },
data() {
return {
counter: 0,
}
},
methods:{
addOne() {
this.counter++
},
subOne() {
this.counter--
},
addNumbers(value) {
this.counter += parseInt(value)
}
}
}
</script>
<style scoped></style>
//子組件
<template>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
<input type="text" v-model="num" />
<button @click="incrementN">+N</button>
</template>
<script>
export default {
emits: {
add:null,
sub:null,
addN:(dispatch) => {
if(dispatch > 10) {
return true
}
return false
}
},
data() {
return {
num: 0,
};
},
methods: {
increment: function () {
this.$emit("add");
},
decrement: function () {
this.$emit("sub");
},
incrementN: function () {
this.$emit("addN", this.num);
},
},
};
</script>
<style scoped></style>
這里采用對(duì)象的格式：可以進(jìn)行傳入?yún)?shù)的判斷。如果符合則返回true,如果不符合則返回false,但是仍可以執(zhí)行，只是在控制臺(tái)出現(xiàn)warning.
emits: {
add:null,
sub:null,
addN:(dispatch) => {
if(dispatch > 10) {
return true
}
return false
}
}
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序詳解
這篇文章主要給大家介紹了關(guān)于element-ui復(fù)雜table表格動(dòng)態(tài)新增列、動(dòng)態(tài)調(diào)整行以及列順序的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-08-08
在vue中使用express-mock搭建mock服務(wù)的方法
這篇文章主要介紹了在vue中使用express-mock搭建mock服務(wù)的方法，文中給大家提到了在vue-test-utils 中 mock 全局對(duì)象的相關(guān)知識(shí) ,需要的朋友可以參考下2018-11-11
在Vue 3中使用OpenLayers讀取WKB數(shù)據(jù)并顯示圖形效果
WKB作為一種緊湊的二進(jìn)制格式,在處理和傳輸空間數(shù)據(jù)時(shí)具有明顯優(yōu)勢(shì),本文介紹了如何在Vue 3中使用OpenLayers讀取WKB格式的空間數(shù)據(jù)并顯示圖形,感興趣的朋友一起看看吧2024-12-12
使用provide/inject實(shí)現(xiàn)跨組件通信的方法
在 Vue 應(yīng)用中,組件間通信是構(gòu)建復(fù)雜應(yīng)用時(shí)的一個(gè)常見(jiàn)需求,Vue3.x 提供了provide和inject API,讓跨組件通信變得更加簡(jiǎn)潔和高效,本文將深入探討如何使用provide和inject在Vue3.x中實(shí)現(xiàn)跨組件通信,并通過(guò)示例代碼一步步進(jìn)行說(shuō)明,需要的朋友可以參考下2024-03-03
el-tree樹(shù)狀控件如何定位到選中的節(jié)點(diǎn)的位置
這篇文章主要介紹了el-tree樹(shù)狀控件如何定位到選中的節(jié)點(diǎn)的位置,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-08-08
Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端
這篇文章主要介紹了Vue-cli 如何將px轉(zhuǎn)化為rem適配移動(dòng)端,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-07-07
vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作
這篇文章主要介紹了vue 添加和編輯用同一個(gè)表單,el-form表單提交后清空表單數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
解決vue 界面在蘋果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓問(wèn)題
這篇文章主要介紹了vue 界面在蘋果手機(jī)上滑動(dòng)點(diǎn)擊事件等卡頓解決方案，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
利用vue組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件方法示例
這篇文章主要給大家介紹了關(guān)于利用vue組件自定義v-model實(shí)現(xiàn)一個(gè)Tab組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12