父组件调用子组件的方法
组件中使用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 // 注意：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。
