无论是 Vue 还是 React 父子组件通信都可以使用 ref
在 Vue 中使用 ref
首先我们会引入一个自定义组件 ,当然 vue 组件是需要注册的并使用
import AddDepartment from './AddDepartment.vue';
components:{
AddDepartment,
},
<AddDepartment
ref='AddDepartmentDrawer'
:titlt="title"
:show="show"
:showdeptEmployee="showdeptEmployee"
@onreloadData="reloadData"
/>
很显然这是一个添加部门的弹窗组件 ref 名称自定义 ,这里我定义为 AddDepartmentDrawer
这里讲一下 ref 代表什么:
ref
代表子组件相当于子组件的 this
如何使用呢?
父组件调用:this.$refs.AddDepartmentDrawer
这样就可以调用子组件的函数 改变子组件的 data 里面的属性
你可能会好奇 ref 下面写的都是什么?
:title="title
父组件把弹窗标题传给子组件
:show="show" :showdeptEmployee="showdeptEmployee"
父组件把方法传给子组件
@onreloadData="reloadData"
父组件的监听子组件函数
子组件接收:
props:{
title:{
type: String
},
show:{
type: Function
},
showdeptEmployee:{
type: Function
}
}
// 子组件向父组件传递数据
this.$emit('onreloadData',data); // 父组件的 reloadData 函数返回 data
父组件接收:
reloadData: function(data){
console.log(data)
}
关于弹窗开关个人建议 使用子组件函数控制
close: function(isVisible){
if( isVisible == true){
this.treeMessage(); // 打开弹窗加载数据
}else{ // 关闭弹窗记得初始化哟 最好写一个初始化函数
this.title = '';
this.type = '';
this.deptName = '';
this.deptCode = '';
this.departmentList = [];
}
let self = this;
self.isShow = isVisible;
},
父组件打开弹窗
this.$refs.AddDepartmentDrawer.close(true);
// 当然也可以在父组件里面加载子组件数据 和在close 为true里面调用等效
this.$refs.AddDepartmentDrawer.treeMessage();
当然有时候父组件传给子组件的东西,子组件需要改变其取值这时候我们需要使用计算属性动态监听 并刷新父组件取值 computed(){}
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于