标签：更新 文件 utils 注册 gis auth ted hat 声明
在 src/components 下新建 Message.vue 文件，复制贴入以下代码：
src/components/Message.vue
1 <template> 2 <div v-show="show" :class="`alert alert-${type} alert-dismissible`"> 3 <button @click="close" type="button" class="close"><span>×</span></button> 4 {{ msg }} 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: ‘Message‘, 11 props: { 12 // 是否显示消息框 13 show: { 14 type: Boolean, 15 default: false 16 }, 17 // 消息框的类型 18 type: { 19 type: String, 20 default: ‘success‘ 21 }, 22 // 消息 23 msg: { 24 type: String, 25 default: ‘‘ 26 } 27 }, 28 watch: { 29 show(value) { 30 if (value) { 31 this.$nextTick(() => { 32 this.$el.scrollIntoView(true) 33 }) 34 } 35 } 36 }, 37 methods: { 38 close() { 39 this.$emit(‘update:show‘, false) 40 } 41 } 42 } 43 </script> 44 45 <style scoped> 46 47 </style>
父子组件之间的数据传递：
props 是用来传递数据的，我们需要在子组件用 props 选项声明它预期的数据，上面的代码中我们声明了 3 个属性，并为其指定了 type 类型和 default 默认值，这样我们就能在父组件上传递这些值了，就像下面的代码一样：
1 <Message :show.sync="msgShow" :type="msgType" :msg="msg"/>
侦听器：
1 watch: { 2 show(value) { 3 if (value) { 4 this.$nextTick(() => { 5 this.$el.scrollIntoView(true) 6 }) 7 } 8 } 9 }
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 修饰符，以创建『双向绑定』：
1 <Message :show.sync="msgShow"/>
在 src/components 下新建 index.js 文件，复制贴入以下代码：
src/components/index.js
1 import Vue from ‘vue‘ 2 import Message from ‘./Message‘ 3 4 Vue.component(‘Message‘, Message)
打开 src/main.js 文件，引入 ./components：
src/main.js
1 import Vue from ‘vue‘ 2 import App from ‘./App‘ 3 import router from ‘./router‘ 4 import ‘./directives‘ 5 import ‘./components‘ 6 .
1、打开 src/views/auth/Register.vue 文件，复制以下代码替换原 <script>：
src/views/auth/Register.vue
1 <script> 2 import createCaptcha from ‘@/utils/createCaptcha‘ 3 import ls from ‘@/utils/localStorage‘ 4 5 export default { 6 name: ‘Register‘, 7 data() { 8 return { 9 captchaTpl: ‘‘, // 验证码模板 10 username: ‘‘, // 用户名 11 password: ‘‘, // 密码 12 cpassword: ‘‘, // 确认密码 13 captcha: ‘‘, // 验证码 14 msg: ‘‘, // 消息 15 msgType: ‘‘, // 消息类型 16 msgShow: false // 是否显示消息，默认不显示 17 } 18 }, 19 created() { 20 this.getCaptcha() 21 }, 22 methods: { 23 getCaptcha() { 24 const { tpl, captcha } = createCaptcha(6) 25 26 this.captchaTpl = tpl 27 this.localCaptcha = captcha 28 }, 29 register(e) { 30 this.$nextTick(() => { 31 const target = e.target.type === ‘submit‘ ? e.target : e.target.parentElement 32 33 if (target.canSubmit) { 34 this.submit() 35 } 36 }) 37 }, 38 submit() { 39 if (this.captcha.toUpperCase() !== this.localCaptcha) { 40 this.showMsg(‘验证码不正确‘) 41 this.getCaptcha() 42 } else { 43 const user = { 44 name: this.username, 45 password: this.password, 46 avatar: `https://api.adorable.io/avatars/200/${this.username}.png` 47 } 48 const localUser = ls.getItem(‘user‘) 49 50 if (localUser) { 51 if (localUser.name === user.name) { 52 this.showMsg(‘用户名已存在‘) 53 } else { 54 this.login(user) 55 } 56 } else { 57 this.login(user) 58 } 59 } 60 }, 61 login(user) { 62 ls.setItem(‘user‘, user) 63 this.showMsg(‘注册成功‘, ‘success‘) 64 }, 65 showMsg(msg, type = ‘warning‘) { 66 this.msg = msg 67 this.msgType = type 68 this.msgShow = false 69 70 this.$nextTick(() => { 71 this.msgShow = true 72 }) 73 } 74 } 75 } 76 </script>
<Message :show.sync="msgShow" :type="msgType" :msg="msg"/>
标签：更新 文件 utils 注册 gis auth ted hat 声明
原文地址：https://www.cnblogs.com/yangguoe/p/9309646.html
