vue：父组件调用子组件的方法和子组件调用父组件的方法

父组件调用子组件的方法

组件中使用ref和$refs来实现给子组件传值或者调用子组件的方法

在Vue中一般很少会用到直接操作DOM，但不可避免有时候需要用到，这时我们可以通过ref和$refs这两个来实现.

ref 被用来给子组件注册引用信息， 引用信息将会注册在父组件的 $refs 对象上，如果是在子组件上使用，引用就指向(子)组件的实例。

$refs 是一个对象，持有已注册过 ref 的所有的子组件。

可以使用ref和$refs来实现给子组件传值

子组件代码如下：

<template>
    <div>
        <el-dialog :title="textMap[dialogStatus]+'工艺节点信息'" :visible.sync="dialogFormVisible" width="35%"
            @close="clearForm">
            <div>
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">
                    <el-form-item label="节点名称" prop="mesNodeNo">
                        <el-select v-model="ruleForm.mesNodeNo" placeholder="请选择" style="100%"
                            @change="getValue">
                            <el-option v-for="item in dataSetItemList" :key="item.itemCode" :label="item.itemName"
                                :value="item.itemCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="投入产出表关联方式" prop="relaInfo">
                        <el-select v-model="ruleForm.relaInfo" placeholder="请选择" style="100%">
                            <el-option v-for="item in dataSetItemList2" :key="item.itemCode" :label="item.itemName"
                                :value="item.itemCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="与上下级节点关联方式" prop="relaNext">
                        <el-select v-model="ruleForm.relaNext" placeholder="请选择" style="100%">
                            <el-option v-for="item in dataSetItemList2" :key="item.itemCode" :label="item.itemName"
                                :value="item.itemCode">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        name: 'MesDialog',
        data() {
            return {//节点字典列表
                dataSetItemList: [],
                //投入产出字典列表
                dataSetItemList2: []</script>

父组件代码如下：

<template>
    <div class="app-container">
        <node-config-dialog ref="nodeConfigDialog" @saveInfo="saveInfo"></node-config-dialog>
    </div>
</template>

<script>
    import NodeConfigDialog from './NodeConfigDialog'
    export default {
        name: 'NodeConfig',
        components: {
            NodeConfigDialog
        },
        data() {
            return {//数据集合代码，节点
            }
        },
        methods: {
            //查询字典数据
            getDataSetItems() {
                dataSet.getDataSetItemByDataSet({ dataCode: this.dataSetCode }).then(res => {
                    if (res.data.length != 1) {
                        this.$message.error("查询数据集合列表失败")
                        return
                    }
                    this.$refs.nodeConfigDialog.dataSetItemList = res.data[0].itemList
                }).catch(err => {
                    console.log(err)
                })
            },
              getDataSetItems2() {
                  dataSet.getDataSetItemByDataSet({ dataCode: this.dataSetCode2 }).then(res => {
                      if (res.data.length != 1) {
                          this.$message.error("查询数据集合列表失败")
                          return
                      }
                      this.$refs.nodeConfigDialog.dataSetItemList2 = res.data[0].itemList
                  }).catch(err => {
                      console.log(err)
                  })
              },
        }
    }
</script>

父组件通过$refs给子组件的属性赋值。

一、使用ref和$refs来实现父组件调用子组件的方法

父组件：

<template>
  <el-container style="margin: 0 auto;  80%;">
    ......
    <auditor-edit ref="auditor-edit" @listenToAuditor="getAuditors"/>
  </el-container>
</template>

<script>
import Auditor from './auditor'

export default {
  name: 'Edit',
  components: {
    'auditor-edit': Auditor
  },
  data() {
    return {
    }
  },
  methods: {
    handleAuditor() {
      this.$refs['auditor-edit'].openDialog()
    }
  }
}

子组件：

<script>
    export default {
        name: "auditor",
      data(){
          return{
            
          }
      },
      methods:{
        openDialog(){
          this.dialogFormVisible=true;
          this.getAllDeptAllUsers();
        }
      },
    }
</script>

子组件调用父组件的方法

一、父组件将方法传递到子组件：父组件通过provide提供方法，子组件通过inject注入方法，在子组件调用父组件的方法

在本vue案例中，由于子组件通过调用父组件的方法的方式传参，从而实现修改父组件data中的对象，所以需要啊使用$forceUpdate（）进行强制刷新

vue父组件：

provide() {
  return {
    selectBase: this.selectBase
  };
},

methods: {
      selectBase(area) {
        this.edit.areaId = area.areaId;
        this.edit.areaName = area.areaName;
        this.$forceUpdate();
      },
}

vm.$forceUpdate()：迫使 Vue 实例重新渲染。在vue框架中，如果data中有一个变量:age，修改他，页面会自动更新。但如果data中的变量为数组或对象，我们直接去给某个对象或数组添加属性，页面是识别不到的。

vue子组件：

先注入：

inject: ["selectArea"],

再使用

handleSelect(row) {
        const area = {
          areaId: row.areaId,
          areaName: row.areaName
        };
        this.selectArea(area);
        this.dialogFormVisible = false;
}

 二、父组件通过属性绑定将方法传递到子组件

父组件：

<template>
  <el-menu class="navbar" :style="background" mode="horizontal">
    <hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
  </el-menu>
</template>

方法：

methods: {
    toggleSideBar() {
      this.$store.dispatch('ToggleSideBar')
    }
  }

子组件：

先接收：

<template>
  <div>
    <svg
      :class="{'is-active':isActive}"
      t="1492500959545"
      class="hamburger"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1691"
      xmlns:xlink="http://www.w3.org/1999/xlink"
      width="64"
      height="64"
      style="color: #FFFFFF"
      @click="toggleClick">
      <path
        d="M966.8023 568.849776 57.196677 568.849776c-31.397081 0-56.850799-25.452695-56.850799-56.850799l0 0c0-31.397081 25.452695-56.849776 
56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 543.397081 998.200404 568.849776 
966.8023 568.849776z"
        p-id="1692" fill="#ffffff"/>
      <path
        d="M966.8023 881.527125 57.196677 881.527125c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.849776 
56.850799-56.849776l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.849776l0 0C1023.653099 856.07443 998.200404 881.527125 
966.8023 881.527125z"
        p-id="1693" fill="#ffffff"/>
      <path
        d="M966.8023 256.17345 57.196677 256.17345c-31.397081 0-56.850799-25.452695-56.850799-56.849776l0 0c0-31.397081 25.452695-56.850799 
56.850799-56.850799l909.605623 0c31.397081 0 56.849776 25.452695 56.849776 56.850799l0 0C1023.653099 230.720755 998.200404 256.17345 
966.8023 256.17345z"
        p-id="1694" fill="#ffffff"/>
    </svg>
  </div>
</template>

<script>
  export default {
    name: 'Hamburger',
    props: {
      isActive: {
        type: Boolean,
        default: false
      },
      toggleClick: {
        type: Function,
        default: null
      }
    }
  }
</script>

注意：子组件接收方法时使用的type为Function。