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