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>
View Code