基于Vue中的父子傳值問(wèn)題解決
主題是Vue中幾種常見(jiàn)的傳值方法。。。先寫(xiě)個(gè)父子傳值吧
vue-cli構(gòu)建項(xiàng)目目錄，嚕啦啦，這個(gè)就不用說(shuō)了吧。
接著創(chuàng)建父子組件，父組件Father.vue，子組件Son.vue(隨意起名，開(kāi)心就好)，然后在父組件中引入子組件，創(chuàng)建一個(gè)父組件的路由。車(chē)門(mén)已經(jīng)焊死了，請(qǐng)繼續(xù)往下看
1.父?jìng)髯?/strong>
Father.vue(用v-bind(簡(jiǎn)寫(xiě) : ) 將父組件傳的值綁定到子組件上)
<template>
<div>
我是爸爸：{{message}}
<hr>
<Son :toSonData="toSonData"></Son>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "兒子你好",
toSonData: "大嘴巴子"http://給子組件的值
};
},
components: {
Son
}
};
</script>
<style lang='scss' scoped>
</style>
Son.vue（在子組件中用props方法接收父組件傳來(lái)的值，兩種方法，具體用哪種看個(gè)人喜好，推薦第二種）
<template>
<div>
我是兒子：{{message}}
<br>
爸爸給我的禮物：{{toSonData}}
</div>
</template>
<script>
export default {
// props:["toSonData"],//第一種方式
props:{//第二種方式
toSonData:{
type:String,
default:function(){
return ""
}
}
},
data () {
return {
message : "爸爸你好"
};
},
}
</script>
<style lang='scss' scoped>
</style>
效果圖：
2.子傳父
Son.vue(在子組件中創(chuàng)建一個(gè)按鈕，定義一個(gè)點(diǎn)擊事件，點(diǎn)擊事件里用this.$emit方法觸發(fā)一個(gè)自定義事件，并傳遞一個(gè)參數(shù))
<template>
<div>
我是兒子：{{message}}
<br>
爸爸給我的禮物：{{toSonData}}
<br>
<button @click="toFatherData">給爸爸傳值</button>
</div>
</template>
<script>
export default {
// props:["toSonData"],//第一種方式
props:{//第二種方式
toSonData:{
type:String,
default:function(){
return ""
}
}
},
data () {
return {
message : "爸爸你好"
};
},
methods:{
toFatherData(){
this.$emit("toFatherData","給爸爸的愛(ài)")
}
}
}
</script>
<style lang='scss' scoped>
</style>
Father.vue(在父組件中的子標(biāo)簽中監(jiān)聽(tīng)該自定義事件并添加一個(gè)響應(yīng)該事件的處理方法，將接收到的值賦給data中的sendSonMessage)
<template>
<div>
我是爸爸：{{message}}
<br>
兒子傳來(lái)的值:{{sendSonMessage}}
<hr>
<Son :toSonData="toSonData" @toFatherData="sendSonData"></Son>
</div>
</template>
<script>
import Son from "./Son.vue";
export default {
data() {
return {
message : "兒子你好",
toSonData: "大嘴巴子",//給子組件的值
sendSonMessage: ""
};
},
components: {
Son
},
methods:{
sendSonData(data){
this.sendSonMessage=data;
}
}
};
</script>
<style lang='scss' scoped>
</style>
效果圖：
補(bǔ)充知識(shí)：在vue中的for循環(huán)，我經(jīng)常用這兩種方法
1、
for(let item of response.data.result) {
用item操作每一條數(shù)據(jù)。
}
item：定義的每一條的變量
response.data.result：要循環(huán)的數(shù)組
2、
response.data.result.forEach((item, index) => {
用item操作每一條數(shù)據(jù)。
}）
response.data.result：要循環(huán)的數(shù)組
index：索引
以上這篇基于Vue中的父子傳值問(wèn)題解決就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-06-06
前端vue中el-table增加合計(jì)行及合并單元格代碼示例
在有些情況下我們會(huì)有合并表頭、合并列、合并尾部合計(jì)的需求,這篇文章主要給大家介紹了關(guān)于前端vue中el-table增加合計(jì)行及合并單元格的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue中如何解除數(shù)據(jù)之間的雙向綁定，具有很好的參考價(jià)值，希望對(duì)2022-09-09
這篇文章主要介紹了寫(xiě)一個(gè)Vue Popup組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了vue中的slot-scope及scope.row用法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了vue對(duì)枚舉值轉(zhuǎn)換方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
vue中使用v-if,v-else來(lái)設(shè)置css樣式的步驟
我們?cè)谑褂胿ue項(xiàng)目開(kāi)發(fā)時(shí)，v-if是使用的非常多的，在這里我們談?wù)勅绾问褂胿-i來(lái)綁定修改css樣式，使用的主要是雙向數(shù)據(jù)綁定，即通過(guò)改變他的狀態(tài)來(lái)改變他的樣式，這篇文章主要介紹了vue中如何使用v-if,v-else來(lái)設(shè)置css樣式,需要的朋友可以參考下2023-03-03
詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目
本篇文章主要介紹了詳解使用vue腳手架工具搭建vue-webpack項(xiàng)目，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-05-05
Vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，和React，都自稱自己只關(guān)注視圖層，全家桶對(duì)于開(kāi)發(fā)一個(gè)完整的中大型單頁(yè)面應(yīng)用項(xiàng)目所必須的所必須的插件和框架，本文給大家分享Vue全家桶入門(mén)基礎(chǔ)教程，感興趣的朋友一起看看吧2021-05-05
vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色
這篇文章主要介紹了vue之el-menu-item如何更改導(dǎo)航菜單欄選中的背景顏色問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05