vue中父子组件通过ref传值「dialog组件」

您所在的位置：网站首页 › 北京大学法硕法学考研科目 › vue中父子组件通过ref传值「dialog组件」

vue中父子组件通过ref传值「dialog组件」

#vue中父子组件通过ref传值「dialog组件」| 来源: 网络整理| 查看: 265

前言

一个基于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 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; }, } 父组件 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 } }) }, }

吊起模态框

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 } }) }, } 拓展方式一、父子组件通过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中定义要改变传给父组件的属性：

父组件

this.fatherName= this.detailData.name; this.fatherSalePrice= this.detailData.salePrice;

子组件

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]); } } }

注：vue的思想是数据驱动视图，所以尽量少的用直接操作dom，当然一些需要获取元素宽高等场景时也会用到$refs

【本文地址】

vue中父子组件通过ref传值「dialog组件」

vue中父子组件通过ref传值「dialog组件」

今日新闻

推荐新闻