本文主要介绍不使用vuex的情况下，通过父子组件传值通信等方法达到弹窗登录的目的。在生产环境中，使用vuex会非常的方便，通过store去维护一个"isLoginVisible"变量即可。

主要思路

首先，在同一个页面文件中实现弹窗功能一般没什么问题，定义一个状态变量控制组件的显示就行了。这里主要介绍弹窗作为一个单独的单文件组件时的情况，涉及父子组件通信及属性绑定的问题。

实现：

  • 弹窗子组件采用element-ui的<el-dialog>元素，该元素有一个visible属性,定义一个isShow的状态prop来控制该弹窗是否显示。
  • 子组件中不直接修改这个isShow的prop，而是通过this.$emit('update:isShow',false)这样的方式，用事件通知父组件自己想要修改isShow的值
  • 父组件里面定义一个showDialogOrNot之类的data字段来维护弹窗是否显示,父组件中修改弹窗状态时，直接修改showDialogOrNot的值即可。
  • 父组件在引用子组件时，对isShow属性作双向绑定：<child-component :is-show.sync="showDialogOrNot"></child-component>。

代码示意

父组件

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

//Parent.vue
<template>
  <div>
      <el-button round id="sign-in" @click="openLogin">登录</el-button>
      <Login :is-show.sync="isLoginVisible"></Login>
  </div>
</template>

<script>
import Login from "@/components/Login";
export default {
  name: "Header",
  components: {Login},
  props:[],
  data(){
    return{
      isLoginVisible:false,
    }
  },
  methods:{
    openLogin(){
      this.isLoginVisible=true;
    },
  }
}
</script>

<style scoped>
#name {
  font-size: 30px;
  font-weight: bold;
}
#register{
  padding: 5px;
}
#register{
  padding: 5px;
}
</style>

子组件

一个不好的例子：

子组件（弹窗组件)—有缺陷的版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

//Login.vue
<template>
  <div>
    <el-dialog v-bind="$attrs"
               v-on="$listeners"
               @open="onOpen"
               @close="onClose"
               title="登录"
               :visible="isShow"
               :close-on-click-modal="false"
               :show-close="false">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"
                    show-word-limit clearable prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    isShow:Boolean
  },
  data() {
    return {
      formData: {
        username: undefined,
        password: "",
      },
    }
  },
  methods: {
    onClose() {
      this.$refs['elForm'].resetFields();
    },
    close() {
      this.$emit('update:isShow', false);
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    },
  }
}

</script>
<style>
</style>

刚开始的时候，直接用一个子组件中的prop来通信，这样可以实现如下的功能：在父组件中点击登录时，弹窗出现，在弹窗中点击取消时，弹窗消失，好像也没什么问题。

但是，如果把上面的:show-close改成true，也就是显示弹窗右上角的关闭按钮，会发现点击这个按钮是无效的。通过查看<el-dialog>的实现代码，发现点击这个按钮的时候是触发一个handleClose方法，这个方法的相关实现如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

handleClose() {
    if (typeof this.beforeClose === 'function') {
        this.beforeClose(this.hide);
    } else {
        this.hide();
    }
}
hide(cancel) {
    if (cancel !== false) {
        this.$emit('update:visible', false);
        this.$emit('close');
        this.closed = true;
    }
}

可以看到：

如果没有定义beforeClose的话，handleClose会直接调用hide()方法，而hide中会触发一个事件，试图更新visible的值，但是之前的代码并没有给visible设置.sync，也就是没有双向绑定，导致visible的值只能由父组件来设置，子组件传递的这个事件并不会被父组件接收，而<el-dialog>就是通过visible的值来控制组件是否显示的。如果给visible加上.sync，会出现另一个问题，Avoid mutating a prop directly...，尝试在本地修改props的值，这是官方不建议的，会导致逻辑混乱。

关于visible的变化情况大致如下：

  1. 在父组件中点击登录时，触发openLogin方法，通过isLoginVisible来设置isShow为true，而isShow将值传给visible，此时visilbe为true。
  2. 点击关闭按钮，子组件(el-dialog)传递事件给父组件(login)，尝试修改isVisible的值为false,但是父组件未处理该事件，因为:isVisible没有用.sync实现双向绑定，此时visible仍然为true，也就是点击关闭按钮没有反应。

这个问题可以通过在子组件中增加一个变量来解决。

子组件（弹窗组件)—修改后的版本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

//Login.vue
<template>
  <div>
    <el-dialog v-bind="$attrs"
               v-on="$listeners"
               @open="onOpen"
               @close="onClose"
               title="登录"
               :visible.sync="isVisible"
               :close-on-click-modal="false"
               :show-close="true">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="formData.username"
                    show-word-limit clearable prefix-icon='el-icon-user-solid' :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" clearable show-password
                    :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    isShow:Boolean
  },
  data() {
    return {
      formData: {
        username: undefined,
        password: "",
      },
      isVisible:false,
    }
  },
  watch:{
    isVisible:function (){
      this.$emit('update:isShow',this.isVisible)
    },
    isShow:function (){
      this.isVisible=this.isShow;
    }
  },
  methods: {
    onOpen() {
    },
    onClose() {
      this.$refs['elForm'].resetFields();
    },
    close() {
      this.$emit('update:isShow',false);
    },
    handleConfirm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.close()
      })
    },
  }
}

</script>
<style>
</style>
  • 修改后的子组件代码比之前多了一个isVisible变量，把设置:visible.sync=isVisible，避免了子组件中直接修改props的情况。
  • 同时在watch中增加了对isShow和isVisible的监控：
    • 如果isShow变化了，说明是父组件传过来的，则在子组件中把新值赋给isVisible，进而修改visible的值，控制组件显示。
    • 如果isVisible变化了，说明是子组件中自己发生状态变化（如上面的"点击右上角的关闭按钮"这个事件）,则通过传递一个事件给父组件，通知父组件自己想要修改isShow的值，目标值就是变化后的isVisible，父组件收到事件后，通过修改子组件的isShow属性来控制显示。

其它

vue中的props，如果要定义类型啥的，则使用的是对象形式，用{}包裹,且属性名不用引号也可以，如果只是列出属性不加约束，则使用字符串数组的模式，此时用[]包裹，且属性名必须加引号。