vue+Element-ui中的父子传值

以父窗口点击添加按钮，弹出添加用户的dialog为例，其中dialog是一个可公用的独立的vue页面

1、父组件中引用子组件的位置加上监听事件，如:

        <el-button size="small" type="primary" icon="el-icon-plus" plain @click="addUser()">添加用户</el-button>

        <!-- 添加用户弹窗  @listen-add-user 监听子组件-->
        <add-user v-if="addUserVisible" ref="addUser" @listen-add-user="listenAddUser"></add-user>

       js部分：

       import addUser from "./create";    //导入自定义组件，在父页面使用标签<add-user></add-user>弹出create.vue子页面

       export default {

               components : { addUser },    //自定义组件

               data() {

                       return {

                             addUserVisible: false             //默认不显示弹窗

                        }

               },

               methods: {

                       addUser() {
                                this.addUserVisible = true;       //点击后显示弹窗
                                this.$nextTick(()=>{

                                     //初始化子组件，可以传参过去，由子组件的init()方法接收处理，通过ref的值addUser可以访问到子组件的属性方法

                                      this.$refs.addUser.init();      
                                 })
                        },
                        listenAddUser() {        //父窗口接收子窗事件的回调的方法
                               //callback

                               // ...  这里可以写自己的逻辑处理
                               this.$refs.addUser.visible = false;  
                         }

               }

       }

2、子组件dialog需要通过visible来控制显示与否

      <el-dialog :title="'添加用户'" :close-click-modal="false" :visible.sync="visible" @closed="closed">...</el-dialog>

      js部分如下：

      export default {
              data() {
                     return {
                            visible:false
                     }
              },
              methods: {
                      onSubmit() {
                               this.$refs['userForm'].validate((valid) => {
                                     if (valid) {
                                           this.listenAddUser();   //操作完成之后，触发父窗口的监听回调方法
                                     } else {
                                           return false
                                     }
                       });
               },
               listenAddUser() {    //这个名称是自定义的
                       //添加完后发射监听事件
                       var params = {};
                        this.$emit('listen-add-user', params);    //其中listen-add-user即为父窗口申明时所用的@listen-add-user
               },
               init() {
                    this.visible = true;
                    this.$nextTick(()=>{

                           //可以写自己的逻辑

                     })
               },
               closed() {
                      this.$refs['userForm'].resetFields();   //清空form
               }
      }