关闭

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

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

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子组件调用父组件的方法

Vue中子组件调用父组件的方法,这里有三种方法提供参考,第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法,第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

less组件库主题定制; 给项目设置常用样式common.less

一般组件库的样式编写都会为使用者设计一些主题样式更换方案,我这里根据自己对主流组件库antd和iview的研究,总结出这两类:iview引入主题样式,复写,antd通过less-loader的modifyVars注入主题变量

使用Typescript装饰器来劫持React组件

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入。

在 Vue.js 中使用无状态组件

在本文中,你将了解功能组件,并了解如何在 Vue 中使用工作流中的无状态组件。你的PC需要以下内容:安装 Node.js version 10.x 或以上版本。可以通过在终端中运行以下命令来验证你是否安装了此版本的Node.js:

vue组件之间互相传值:父传子、子传父

在通信中,无论是子组件向父组件传值还是父组件向子组件传值,他们都有一个共同点就是有中间介质,子向父的介质是自定义事件,父向子的介质是props中的属性或者借助子组件的ref数性。

React引入Antd组件

Ant组件的安装和使用在官网都有教程,下面记录一下自己的使用。Ant组件是好用,一引入直接就有了功能组件。但问题是UI给我们的和这些组件往往不一样,比如样式颜色,多个view,button什么的

Vue组件的操作:自定义组件,动态组件,递归组件

v-model双向绑定创建双向数据绑定,v-model指令用来在input,select,checkbox,radio等表单控件。v-model指令在内部使用不同的属性为不同的输入元素抛出不同的事件。

自定义组件

组件(component)就是零件,将零件组装成想要的工具(页面)。组件是Vue.js最强大的功能之一,它可以扩展HTML元素,封装可重用的代码,通过传入对象的不同,实现组件的复用。

实现一个简单的toast组件

最近写了个简单的html+js的页面,里面需要一个提交表单的反馈动作,于是手撸了个简单的toast组件

小程序自定义actionSheet组件

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

点击更多...

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