vue父子傳值,兄弟傳值,子父傳值詳解
更新時間：2021年11月01日 14:48:03 作者：大林愛學習
這篇文章主要介紹了Vue傳值-三種常用傳值示例，主要介紹了父組件向子組件進行傳值，子組件向父組件傳值和非父子組件進行傳值，感興趣的小伙伴們可以參考一下
一、父組件向子組件傳值
1.父組件.vue
// 父組件中
<template>
<div>
<Child ref="child" :title="value"/>
</div>
</template>
<script>
export default {
data() {
return {
value: 'hello world!'
}
}
}
</script>
2.子組件.vue
// 父組件中
<template>
<div>
<span>{{title}}</span>
</div>
</template>
<script>
export default {
props: {
title: {
type: String,
default: ''
}
}
}
</script>
//title值為'hello world!
二、兄弟組件間傳值還可以通過中間件Bus
$emit 傳值
$on 接收
$off 刪除傳輸事件
1.A組件.js
this.$bus.$emit("flag",true)
2.B組件.js
mounted() {
this.$bus.$off('flag')
this.$bus.$on('flag', data=> {
this.flag= data
})
}
三、子組件向父組件傳值
1.父組件.js
<template>
<div>
<Child ref="child" @getTitle="getTitle"/>
</div>
</template>
<script>
import Child from './components/Child'
export default {
components: {
Child
},
data() {
return {
}
},
method:{
getTitle(data){
console.log(data)
}
}
}
</script>
打印結果為 hello xuliting
2.子組件.js
<template>
<div>
<span>{{title}}</span>
</div>
</template>
<script>
export default {
data() {
return {
title: 'hello xuliting'
}
},
mounted(){
this.getFun()
},
method:{
getFun(){
this.$emit("getTiltle",this.title)
}
}
}
</script>
總結：
組件間也可以通過傳遞方法從而解決。例如父組件為A，子組件有B和C。
父組件A調用子組件B的方法定義為aFun，把aFun傳遞給子組件C即可
這是在父組件中的組件C進行方法傳遞
<C :a-fun="aFun" />
引用的則是在組件C，通過props
props: {
aFun: {
type: Function,
default: () => function() {}
}
}
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容！
相關文章
這篇文章主要介紹了vue elementui上傳圖片限制格式、大小和尺寸方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文通過一段簡單的代碼給大家介紹了基于純vue實現(xiàn)側邊菜單欄手風琴效果，代碼很簡單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
這篇文章主要介紹了Vue實現(xiàn)星級評價效果的實例代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12
說到Vue緩存，我們肯定首先選擇官方提供的緩存方案keep-alive，本文主要介紹了詳解Vue適時清理keepalive緩存方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
這篇文章主要介紹了vue之計算屬性的緩存computed的用法解讀，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要介紹了vue 判斷頁面是首次進入還是再次刷新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序
這篇文章主要為大家詳細介紹了使用element+vuedraggable實現(xiàn)圖片上傳拖拽排序，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了關于Vue 3.0引入百度地圖不兼容的解決辦法,本文通過實例代碼給大家分享解決方法，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細介紹了vue右鍵菜單的簡單封裝，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue中.$mount('#app')手動掛載操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09