vue父子組件進行通信方式原來是這樣的
更新時間：2022年02月13日 17:28:17 作者：賣菜的小白
這篇文章主要為大家詳細介紹了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)文章
本文主要介紹了vue中實現(xiàn)千位分隔符的示例代碼,主要兩種方法,一種是某一個字段轉(zhuǎn)換,一種是表格table中的整列字段轉(zhuǎn)換,具有一定的參考價值,感興趣的可以了解一下2023-11-11
Vue的hover/click事件如何動態(tài)改變顏色和背景色
這篇文章主要介紹了Vue的hover/click事件如何動態(tài)改變顏色和背景色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
Vue插件報錯:Vue.js is detected on this page.問題解決
這篇文章主要介紹了Vue插件報錯:Vue.js is detected on this page.問題解決,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點優(yōu)化更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章介紹了使用vue-cli創(chuàng)建vue項目的方法，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-01-01
Vue中的el-date-picker時間選擇器的使用實例詳解
el-date-picker是Element UI框架中提供的日期選擇器組件,它支持單個日期、日期范圍、時間、日期時間等多種選擇方式,本文給大家介紹Vue中的el-date-picker時間選擇器的使用,感興趣的朋友一起看看吧2023-10-10
今天小編就為大家分享一篇Vue調(diào)用后端java接口的實例代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
Vue Router目前最新版本是4.X，本文主要主要介紹了10分鐘快速上手VueRouter4.x教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue cli3.0 引入eslint 結(jié)合vscode使用
這篇文章主要介紹了vue cli3.0 引入eslint 結(jié)合vscode使用，本文分步驟給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
有時候在項目中我們經(jīng)常需要設(shè)置簡單的倒計時功能,這個可以通過定時器來實現(xiàn),下面這篇文章主要給大家介紹了關(guān)于vue項目使用定時器每隔幾秒運行一次某方法的相關(guān)資料,需要的朋友可以參考下2023-04-04