父组件调用子组件的方法
组件中使用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="width: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="width: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="width: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; width: 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; }