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

一个基于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
父组件

拓展

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

父组件


子组件

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

 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » vue中父子组件通过ref传值「dialog组件」

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活