一个基于Vue的项目，有可能会很多的组件，组件之间难免需要进行数据的传递，比如父组件 传数据 给子组件；子组件传数据给父组件等，需要用到组件之间的通信处理方式。
项目中经常用到element中的dialog组件，现记录父子组件通过ref传值。
操作流程：
1.父组件中点击按钮吊起子组件模态框dialog进行内容设置，并给子组件传递id
this.$nextTick(() => { //此函数执行时所有的DOM挂载和渲染都已完成
this.$refs.dialogRef.init(this.fatherId); //获取子组件中init方法并将父组件id传递给子组件
});
2.在子组件中需接收父组件传来的内容id并查询内容详情
init (val) {
this.activityId = val //接收父组件传递的id值
}
3.在子组件dialog中可以编辑内容，然后将数据通过$emit传递给父组件
this.$emit("setActivityBtn", this.SetForm); //setActivityBtn为父组件接收的方法，将参数传给父组件
4.父组件接收数据后提交到服务器
setActivityBtn(data) { //获取子组件传来的值
let params = data
},
以下为父子组件全部代码
子组件Dialog
<template>
<div class='Dialog'>
<el-dialog title="活动设置" :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, //模态框
SetForm: { }, //模态框数据
}
},
methods: {
// 初始化方法
init (val) {
this.activityId = val //接收父组件传递的值
this.dialogFormVisible = true;
this.getActivityInfo()
},
//获取内容详情
getActivityInfo () {
},
//模态框确定按钮
setActivityBtn () {
this.$emit("setActivityBtn", this.SetForm); //将参数传给父组件
this.dialogFormVisible = false;
},
}
</script>
父组件
<template>
<div class='father'>
<el-button type="primary" icon="el-icon-plus" @click="activitySet">吊起模态框</el-button>
<!-- 子组件模态框 -->
<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, //模态框
}
},
components: { // 组件的引用
Dialog
},
methods: {
//吊起模态框
activitySet() {
this.dialogShow= true;
this.$nextTick(() => { //此函数执行时所有的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函数直接return获得
父组件中：可以通过ref向子组件传值
this.$refs.dialogRef.name1=this.fatherName1
this.$refs.dialogRef.name2=this.fatherName2
子组件中：可以通过数组的形式向父组件传递多个参数
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的思想是数据驱动视图，所以尽量少的用直接操作dom，当然一些需要获取元素宽高等场景时也会用到$refs
网友评论