vue.js注册引用全局消息组件

时间: 2019-01-17阅读: 1140标签: 组件分享

复制链接

新浪微博

QQ 好友

扫一扫分享

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>

站长推荐

1.云服务推荐: 国内主流云服务商，各类云产品的最新活动，优惠券领取。地址：阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台，如果你有流量，可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/1833

关闭

vue.js注册引用全局消息组件

Flutter自定义状态管理组件

Vue父子组件传值(复杂数据类型的值)

深入探讨前端组件化开发

vue中利用provide和inject实现页面刷新（无白屏）重载组件

小程序自定义actionSheet组件

vue的provide/inject的使用

深入理解React中的setState

Vue实现Tab控件

vue的provide / inject 有什么用？

React Native 实现城市选择组件