淺析vue中的組件傳值

更新時(shí)間：2022年04月25日 08:29:20 作者：清城幻影

這篇文章主要介紹了淺析vue中的組件傳值，文章基于vue的相關(guān)資料展開(kāi)對(duì)主題的詳細(xì)介紹，具有一定的參考價(jià)值，需要的小伙伴可以參考一下

一、正向傳值

基本寫法：

props：[“接收變量1”，“接收變量2”。。。。。。。]

使用：

1，在需要接收數(shù)據(jù)的子組件中，定義props設(shè)置接收變量

<template>
<div>
<!-- 2.直接向變量一樣進(jìn)行使用 -->
zizizizzizizizizizi---{{title}}
</div>
</template>
<script>
export default {
// 1.定義了接收參數(shù)
props:["title"]
}
</script>
<style>
</style>

2，父組件傳遞

在子組件被調(diào)用的位置，父組件給接受數(shù)據(jù)上傳值

<template>
<div>
fufuffufufuf----{{text}}
<!-- 3.子組件接收父組件的數(shù)據(jù) -->
<Zi :title="text"/>
<Zib/>
</div>
</template>
<script>
import Zi from "./zi.vue"
import Zib from "./zib.vue"
export default {
data(){
return {
text:"你好我是fufuffu的變量！！"
}
},
components:{
Zi,Zib
}
}
</script>
<style>
</style>

驗(yàn)證寫法 props驗(yàn)證

就是在正向傳值的時(shí)候，有時(shí)候需要對(duì)傳遞過(guò)來(lái)的數(shù)據(jù)進(jìn)行格式類型上的約束，傳統(tǒng)的proposal寫法傳遞任何內(nèi)容都是可以的，但是如果要約束，那么我們可以使用props驗(yàn)證的寫法，對(duì)正向傳值歸來(lái)的數(shù)據(jù)格式進(jìn)行驗(yàn)證

語(yǔ)法：

props：{

你定義的接受數(shù)據(jù)變量：你要的數(shù)據(jù)類型

}

<template>
<div>
<!-- 2.直接向變量一樣進(jìn)行使用 -->
zizizizzizizizizizi---{{title+6}}
</div>
</template>
<script>
export default {
// 1.定義了接收參數(shù)
// props:["title"]
// props驗(yàn)證
props:{
title:Number
}
}
</script>
<style>
</style>

注意：

proposal驗(yàn)證是驗(yàn)證我們傳遞參數(shù)的時(shí)候數(shù)據(jù)的格式和類型的校驗(yàn)，就算傳遞的數(shù)據(jù)類型不符合我們的規(guī)則，從用戶的角度看不會(huì)有影響顯示，但是會(huì)在控制臺(tái)有個(gè)警告提示

二、逆向傳值

子組件把數(shù)據(jù)傳遞給父組件

逆向傳值默認(rèn)是不允許的要用自定義事件完成

自定義事件

this.$emit("自定義事件名"，“傳遞給自定義事件的數(shù)據(jù)”)

實(shí)現(xiàn)逆向傳值

1，因?yàn)槟嫦騻髦的J(rèn)不允許，需要通過(guò)事件來(lái)觸發(fā)一個(gè)自定義事件拋出

代碼：

<template>
<div>
zizizizizizizi
<button @click="btn()">點(diǎn)擊逆向傳值</button>
</div>
</template>
<script>
export default {
data() {
return {
text:"我是子組件的變量"
}
},
methods: {
btn(){
this.$emit("btn",this.text)
}
},
}
</script>
<style>
</style>

2，在父組件中接收子組件拋出的自定義事件

<template>
<div>
fufufufuufuf-----------{{futext}}
<Zi @btn="fufun"/>
</div>
</template>
<script>
import Zi from "./zi.vue"
export default {
data() {
return {
futext:""
}
},
components:{
Zi
},
methods: {
fufun(val){
console.log(val);
this.futext=val
}
}
}
</script>
<style>
</style>

ref的方式完成：

只需要把ref綁定到組件上

三、同胞傳值/兄弟傳值

low的方式（了解）

兩個(gè)兄弟組件之間需要傳遞數(shù)據(jù)，a組件先逆向傳值給父組件，父組件在正向傳值給b組件

中央事件總線 eventBus

中央事件總線就是凌駕在我們需要同胞傳值的組件之上的一個(gè)空的vue實(shí)例

eventBus文件夾就是用來(lái)存放中央事件總線這個(gè)實(shí)例的
在新建的文件夾與文件之間創(chuàng)建一個(gè)空的vue實(shí)例

// 1,創(chuàng)建中央事件總線
import Vue from "vue"
export default new Vue

拋出

methods: {
fun(){
eventBus.$emit("apao",this.ziatext)
}
}

接收

$on（）監(jiān)聽(tīng)實(shí)例上的自定義事件

$on（“你要監(jiān)聽(tīng)的中自定義時(shí)間是什么”，（）=》{

console.log（val）

}）

<script>
// 1,引用中央事件總線
import eventBus from "@/eventBus"
export default {
?// 2,通過(guò)生命周期的鉤子函數(shù)來(lái)調(diào)用$on進(jìn)行實(shí)力上自定義事件的監(jiān)聽(tīng)
mounted(){
eventBus.$on("apao",(val)=>{
console.log(val);
})
}
}
</script>

到此這篇關(guān)于淺析vue中的組件傳值的文章就介紹到這了,更多相關(guān)vue組件傳值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: