关闭

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

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

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

关闭

Flutter自定义状态管理组件

Flutter 新建组件有俩种状态组件: StatelessWidget 和 StatefulWidget ,这些在新建 Flutter 项目就能看到相关展示代码,下面就详细解释下这俩者区别:

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

vue 父子组件传值是很常见的,多数情况下都是父传递给子的值是基础数据类型,如string,number,boolean,当父组件值被修改时,子组件能够实时的作出改变。如果父子传值的类型是复杂数据类型(object,array)这种时

深入探讨前端组件化开发

前端组件化开发,已经有多年的历史了,不管是服务端渲染,还是前端SPA,都有了比较成熟的组件化开发的方案。 随着组件化开发的普及,前端社区中贡献了很多不错的前端组件,都提供开箱即用的方案,使得更好的发挥组件化的优势。

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

在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求。用vue-router重新路由到当前页面,页面是不进行刷新的,采用window.reload(),或者router.go(0)刷新时

小程序自定义actionSheet组件

在微信小程序中,针对操作菜单的需求,官方文档提供了相应的api,如下图所示。但是小程序自带的操作菜单没有 “标题” 这么一个参数,不能在操作菜单的顶部显示自定义的标题

vue的provide/inject的使用

provide/inject 这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。无论多少层都会被子组建拿到,主要用在高阶组件

深入理解React中的setState

组件的状态是一种保存、处理和使用给定组件内部信息的方法,并允许你实现其自身的逻辑。状态本身其实是JavaScript中一个简单的对象(Plain Old Java[Script] Object),并且改变它是使组件重新进行渲染的几种方法之一

Vue实现Tab控件

使用Vue实现Tab功能。创建一个tab.vue文件,内容如下:其中change方法和tabs需要父组件中定义,tabs的格式如下:为确保正确渲染,id需要保证唯一性。

vue的provide / inject 有什么用?

provide 和 inject 主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。provide/inject平时用的比较少,多数用于开发组件,但某些情况下还是很好用的。

React Native 实现城市选择组件

很多 App 都有城市选择的功能,今天带大家编写一个城市选择组件。下面是这个组件的效果图。从上图中可以看出,我们将所有城市按照字母区分块,右边是字母索引。通过点击右边的字母可以跳转到相对应的块

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!