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

<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