vue.js注册引用全局消息组件
1 注册
在 src/components 下新建 index.js 文件，复制贴入以下代码：
注册全局组件需要使用 vue.component，第一个参数 ‘Message‘ 是组件名称，第二个参数 Message 是一个对象或者函数，我们这里是一个对象。（vue-cli模板下）
import Message from ‘./Message‘
Vue.component(‘Message‘, Message)
2 引用
打开 src/main.js 文件，引入 ./components：
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import ‘./directives‘
import ‘./components‘我们通过引入 ./components/index.js，执行其中代码，就可以使用其内部注册的所有组件了。
3 使用
在目标组件的 data 中添加了 3 个消息组件相关的属性 msg、msgType 和 msgShow
<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 // 是否显示消息，默认不显示
}
},
然后在 methods 中添加了一个 showMsg 的方法用来改变当前的消息；
methods: {
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>本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！