一個基于Vue的項目，有可能會很多的組件料仗，組件之間難免需要進行數(shù)據(jù)的傳遞，比如父組件 傳數(shù)據(jù) 給子組件伏蚊；子組件傳數(shù)據(jù)給父組件等立轧，需要用到組件之間的通信處理方式。
項目中經(jīng)常用到element中的dialog組件躏吊，現(xiàn)記錄父子組件通過ref傳值氛改。
操作流程：
1.父組件中點擊按鈕吊起子組件模態(tài)框dialog進行內(nèi)容設(shè)置，并給子組件傳遞id
this.$nextTick(() => { //此函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成
this.$refs.dialogRef.init(this.fatherId); //獲取子組件中init方法并將父組件id傳遞給子組件
});
2.在子組件中需接收父組件傳來的內(nèi)容id并查詢內(nèi)容詳情
init (val) {
this.activityId = val //接收父組件傳遞的id值
}
3.在子組件dialog中可以編輯內(nèi)容比伏，然后將數(shù)據(jù)通過$emit傳遞給父組件
this.$emit("setActivityBtn", this.SetForm); //setActivityBtn為父組件接收的方法胜卤，將參數(shù)傳給父組件
4.父組件接收數(shù)據(jù)后提交到服務(wù)器
setActivityBtn(data) { //獲取子組件傳來的值
let params = data
},
以下為父子組件全部代碼
子組件Dialog
<template>
<div class='Dialog'>
<el-dialog title="活動設(shè)置" :visible.sync="dialogFormVisible" width='40%' center>
<el-form :model="SetForm">
<el-form-item label="活動名稱" label-width="90px">
<el-input v-model="SetForm.activityName" autocomplete="off" disabled></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="setActivityBtn">確 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
name: '',
data () {
return {
id: '', //用來查詢詳情的id
dialogFormVisible: false, //模態(tài)框
SetForm: { }, //模態(tài)框數(shù)據(jù)
}
},
methods: {
// 初始化方法
init (val) {
this.activityId = val //接收父組件傳遞的值
this.dialogFormVisible = true;
this.getActivityInfo()
},
//獲取內(nèi)容詳情
getActivityInfo () {
},
//模態(tài)框確定按鈕
setActivityBtn () {
this.$emit("setActivityBtn", this.SetForm); //將參數(shù)傳給父組件
this.dialogFormVisible = false;
},
}
</script>
父組件
<template>
<div class='father'>
<el-button type="primary" icon="el-icon-plus" @click="activitySet">吊起模態(tài)框</el-button>
<!-- 子組件模態(tài)框 -->
<Dialog v-if="dialogShow" ref="dialogRef" @setActivityBtn="setActivityBtn"></Dialog>
</div>
</template>
<script>
import Dialog from '../components/Dialog'
export default {
name: '',
data () {
return {
fatherId:'', //詳情id
dialogShow: false, //模態(tài)框
}
},
components: { // 組件的引用
Dialog
},
methods: {
//吊起模態(tài)框
activitySet() {
this.dialogShow= true;
this.$nextTick(() => { //此函數(shù)執(zhí)行時所有的DOM掛載和渲染都已完成
this.$refs.dialogRef.init(this.fatherId); //獲取子組件中init方法并將父組件id傳遞給子組件
});
},
//確定按鈕
setActivityBtn(data) { //獲取子組件傳來的值
let params = data
XXXXXXXX(params).then(res => {
if (res.data.code == 0) {
this.dialogFormVisible = false
}
})
},
}
</script>
拓展
方式一、父子組件通過ref傳值,然后在子組件中data函數(shù)直接return獲得
父組件中：可以通過ref向子組件傳值
this.$refs.dialogRef.name1=this.fatherName1
this.$refs.dialogRef.name2=this.fatherName2
子組件中：可以通過數(shù)組的形式向父組件傳遞多個參數(shù)
this.$emit("setActivityBtn", [this.SetForm,this.dialogFormVisible]);
方式二.v-bind綁定赁项，子組件中props接受葛躏，return中定義要改變傳給父組件的屬性：
父組件
<!-- html-->
<template>
<add-cart-pop @confirmAddCart="addCart"
:sonName="fatherName"
:sonSalePrice="fatherSalePrice">
</add-cart-pop>
</template>
<!-- js-->
<script>
this.fatherName= this.detailData.name;
this.fatherSalePrice= this.detailData.salePrice;
</script>
子組件
<script>
export default {
props: {
sonName: {
type:String,
default:''
},
sonSalePrice: {
type:Number,
default:0
},
},
data:function () {
return {
cartName:this.sonName,
cartSalePrice:this.sonSalePrice
}
},
methods: {
addCart() {
this.$emit('confirmAddCart',[this.cartName,this.cartSalePrice]);
}
}
}
</script>
注：vue的思想是數(shù)據(jù)驅(qū)動視圖，所以盡量少的用直接操作dom悠菜，當(dāng)然一些需要獲取元素寬高等場景時也會用到$refs
