消息组件

1). 新建消息组件

在 src/components 下新建 Message.vue 文件，复制贴入以下代码：

src/components/Message.vue

<template>
  <div v-show="show" :class="`alert alert-${type} alert-dismissible`">
    <button @click="close" type="button" class="close"><span>×</span></button>
    {{ msg }}
  </div>
</template>

<script>
export default {
  name: 'Message',
  props: {
    // 是否显示消息框
    show: {
      type: Boolean,
      default: false
    },
    // 消息框的类型
    type: {
      type: String,
      default: 'success'
    },
    // 消息
    msg: {
      type: String,
      default: ''
    }
  },
  watch: {
    show(value) {
      if (value) {
        this.$nextTick(() => {
          this.$el.scrollIntoView(true)
        })
      }
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
    }
  }
}
</script>

<style scoped>

</style>

父子组件之间的数据传递：

props 是用来传递数据的，我们需要在子组件用 props 选项声明它预期的数据，上面的代码中我们声明了 3 个属性，并为其指定了 type 类型和 default 默认值，这样我们就能在父组件上传递这些值了，就像下面的代码一样：

<Message :show.sync="msgShow" :type="msgType" :msg="msg"/>

侦听器：

watch: {
  show(value) {
    if (value) {
      this.$nextTick(() => {
        this.$el.scrollIntoView(true)
      })
    }
  }
}

watch 选项提供了一个方法来响应数据的变化，在上面的代码中，我们需要监听 show 的新值 value，完整的传参是 show(val, oldVal)，val 是新值，oldVal 是旧值。当新值返回 true 时，我们将当前元素滚动到可视区域的顶部。

触发一个事件：

我们可以在组件模板内使用组件定义的 props，但我们不应该直接修改 props。要在组件内更新 props 选项的 show 值，需要显式地触发一个更新事件：

close() {
  // 可以触发一个事件来更新 show this.$emit('update:show', false) 
// 不可以直接修改 show，这会导致 Vue 在控制台发出错误警告 this.show = false
}

props 的绑定默认是单向的，我们要在组件内部更新 show 值，需要在父组件上添加 .sync 修饰符，以创建『双向绑定』：

<Message :show.sync="msgShow"/>

2). 注册全局消息组件

在 src/components 下新建 index.js 文件，复制贴入以下代码：

src/components/index.js

import Vue from 'vue'
import Message from './Message'

Vue.component('Message', Message)

3). 引入全局消息组件

打开 src/main.js 文件，引入 ./components：

src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import './directives'
import './components'
.

4). 使用消息组件

1、打开 src/views/auth/Register.vue 文件，复制以下代码替换原 <script>：

src/views/auth/Register.vue

<script>
import createCaptcha from '@/utils/createCaptcha'
import ls from '@/utils/localStorage'

export default {
  name: 'Register',
  data() {
    return {
      captchaTpl: '', // 验证码模板
      username: '', // 用户名
      password: '', // 密码
      cpassword: '', // 确认密码
      captcha: '', // 验证码
      msg: '', // 消息
      msgType: '', // 消息类型
      msgShow: false // 是否显示消息，默认不显示
    }
  },
  created() {
    this.getCaptcha()
  },
  methods: {
    getCaptcha() {
      const { tpl, captcha } = createCaptcha(6)

      this.captchaTpl = tpl
      this.localCaptcha = captcha
    },
    register(e) {
      this.$nextTick(() => {
        const target = e.target.type === 'submit' ? e.target : e.target.parentElement

        if (target.canSubmit) {
          this.submit()
        }
      })
    },
    submit() {
      if (this.captcha.toUpperCase() !== this.localCaptcha) {
        this.showMsg('验证码不正确')
        this.getCaptcha()
      } else {
        const user = {
          name: this.username,
          password: this.password,
          avatar: `https://api.adorable.io/avatars/200/${this.username}.png`
        }
        const localUser = ls.getItem('user')

        if (localUser) {
          if (localUser.name === user.name) {
            this.showMsg('用户名已存在')
          } else {
            this.login(user)
          }
        } else {
          this.login(user)
        }
      }
    },
    login(user) {
      ls.setItem('user', user)
      this.showMsg('注册成功', 'success')
    },
    showMsg(msg, type = 'warning') {
      this.msg = msg
      this.msgType = type
      this.msgShow = false

      this.$nextTick(() => {
        this.msgShow = true
      })
    }
  }
}
</script>

  <Message :show.sync="msgShow" :type="msgType" :msg="msg"/>