欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺析vue中的組件傳值

 更新時間：2022年04月25日 08:29:20   作者：清城幻影  
這篇文章主要介紹了淺析vue中的組件傳值，文章基于vue的相關資料展開對主題的詳細介紹，具有一定的參考價值，需要的小伙伴可以參考一下

前言：

只要是做項目，組件和組件之間的傳值是不可避免的，那么怎樣才能完成組件之間的傳值呢？我總結了以下幾點，若有不足，歡迎補充

一、正向傳值

基本寫法：

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

使用：

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

<template>
<div>
<!-- 2.直接向變量一樣進行使用 -->
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>

驗證寫法 props驗證

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

語法：

props：{

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

}

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

注意：

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

更多驗證

1，多種類型

props:{
title:[Number,String]
}

2，默認值

// 默認值
props:{
title:{
// 類型
type:String,
// 默認值
default:"我是默認值"
}
}

二、逆向傳值

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

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

自定義事件

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

實現(xiàn)逆向傳值

1，因為逆向傳值默認不允許，需要通過事件來觸發(fā)一個自定義事件拋出

代碼：

<template>
<div>
zizizizizizizi
<button @click="btn()">點擊逆向傳值</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的方式（了解）

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

中央事件總線 eventBus

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

  • eventBus文件夾就是用來存放中央事件總線這個實例的
  • 在新建的文件夾與文件之間創(chuàng)建一個空的vue實例
// 1,創(chuàng)建中央事件總線
import Vue from "vue"
export default new Vue

拋出

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

接收

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

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

console.log（val）

}）

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

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

相關文章

最新評論