Vue 组件通信

无论是 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(){}