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

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

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>

通过npm或yarn自动生成vue组件

不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template、script、style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件

Vue和React组件之间的传值方式

在现代的三大框架中,其中两个Vue和React框架,组件间传值方式有哪些?组件间的传值是灵活的,可以有多种途径,父子组件同样可以使用EventBus,Vuex或者Redux

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

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

react 函数子组件(Function ad Child Component)

函数子组件(FaCC )与高阶组件做的事情很相似, 都是对原来的组件进行了加强,类似装饰者。FaCC,利用了react中children可以是任何元素,包括函数的特性,那么到底是如何进行增强呢?

Vue中插槽的作用_Vue组件插槽的使用以及调用组件内的方法

通过给组件传递参数, 可以让组件变得更加可扩展, 组件内使用props接收参数,slot的使用就像它的名字一样, 在组件内定义一块空间。在组件外, 我们可以往插槽里填入任何元素。slot-scope的作用就是把组件内的数据带出来

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

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯