关闭

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

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

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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

Vue父子组件双向绑定传值的实现方法

从某方面讲,父组件传值给子组件进行接收,之后在子组件中更改是不允许的。你会发现vue也会直接报错,而在封装一些组件的时候,又希望做到数据的双向绑定,可以更好的控制与使用,在网上找到了两种方法

vue.js的一个消息组件实例

v-show 是一个条件渲染指令,它只切换元素 CSS 属性的 display,这里当 show 值为 true 时,我们就显示该元素。props 是用来传递数据的,我们需要在子组件用 props 选项声明它预期的数据,上面的代码中我们声明了 3 个属性

react中使用Fragments

在官方文档中,原文是,“React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点。”,意思就是你在写组件的时候,外面再套一个Fragments。类似于vue中的template

React Native 实现城市选择组件

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

父组件从vuex获取数据给子组件传值延迟问题

做项目的时候发现如果子组件在页面比较靠上,子组件渲染的时候父组件还未取到值,导致子组件取不到数据

小程序自定义actionSheet组件

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

开发一个高质量的前端组件,这些姿势一定要知道

NPM 无论从知名度、模块数量、社区的话题数量来看,都算得上是一骑绝尘,将其他语言的模块仓库远远甩在了后面。NPM 的生态既已如此成熟,按说开发者对于 NPM 包的发布和维护应该非常熟悉才是

仅3行核心css代码的rate评分组件

用css实现一个rate评分 ❗ 核心代码也就三行,梳理如下:去找个好看的iconfont,[Iconfont-阿里巴巴矢量图标库];借用5个radio单选框,把默认样式都去掉,显示默认的星星;

组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)

首先我们先说一下在自定义组件中使用v-model的必要条件,在自定义的组件中要有input(这里我们先不讨论单选复选框),在自定义组件的模板对象中要有props属性,且里面要含有一个value

Vue的组件化

组件化是Vue的精髓,Vue就是由一个一个的组件构成的。Vue的组件化设计到的内容又非常多,当在面试时,被问到:谈一下你对Vue组件化的理解。这时候又有可能无从下手,因此在这里阐释一下个人对Vue的组件化的理解。

点击更多...

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