Vue函数式调用组件创建公共组件

2020-01-16 08:52:22

参考地址 Vue——函数式调用组件

正常情况下使用组件


  import 组件

import xxx from 'XXXx/XXX.vue'

注册组件

export default {

    components:{

      XXX

    },

}

然后再使用组件以及配置,如果要显示这个组件就要改别isShow的值

<template>

    <div>

        <xxx :show="isShow" text="hello"></xxx>

    </div>

</template>

所有组件都需要这么去调用,就会有些许麻烦而且不太美观。像Loading、Toast等这些组件,一页面可以经常用到而且每次显示的内容都可能不一样,这样的话用js的方式【this.$xxx.show(option)】去调用就方便很多,而且代码也更整洁。


实现

以Loading组件为例,先创建好loading组件



创建一个loading.js,并在里面引入组件以及Vue

import Vue from 'vue'

import Loading from 'loading.vue'

实例化Vue,并用render函数创建组件模板

const v = new Vue({

    render(createElement){

        return createElement(Loading) 

    }

})

渲染DOM,并挂载到body里

v.$mount() //渲染

 

document.body.appendChild(v.$el) //挂载

获取组件的实例

const load = v.$children[0]

定义需要被暴露的接口

//显示loading弹窗

function showLoading(opt){

    //load相当于是在Loading.vue当中的this

    //showLoading()就是methons中的函数

    load.showLoading(opt)

}

 

export default {

    showLoading

}

最后在mian.js中引入,并且挂到Vue的原型里

import Vue from 'vue'

import loading from './component/Loading.vue'

 

Vue.prototype.$loading = loading

调用loading

<template>

   <div>

       <button @click="load">Loading</button>

   </div>

</template>

<script>

export default {

   name:'test',

   data () {

      return {}

   },

   methods: {

      load(){

         this.$loading.showLoading({

            info:'加载中'

         })

      }

   }

}

</script>

效果:



  • 2017-07-17 14:48:20

    通过node.js保存emoji到mysql

    但是emoji通过utf-8编码后,每个字符占4个字节,属于宽字符。而老版本的mysql只支持一个字符占3个字节,所以老版本的mysql是无法存储emoji的。新版本的mysql增加了字符集utf8mb4,可以支持单字符最多占4个字节。utf8mb4是utf8的超集,可以无需修改地支持原来的utf8字符 要让mysql存储emoji,需要满足2个条件:

  • 2017-07-17 17:05:03

    大白话讲解Promise(一)

    去年6月份, ES2015正式发布(也就是ES6,ES6是它的乳名),其中Promise被列为正式规范。作为ES6中最重要的特性之一,我们有必要掌握并理解透彻。本文将由浅到深,讲解Promise的基本概念与使用方法。

  • 2017-07-19 07:54:11

    Javascript中delete运算符

    Delete是Javascript语言中使用频率较低的操作之一,但是有些时候,当我们需要做delete或者清空动作时,就需要delete操作。在这篇文章中,我们将深入探讨如何使用它,以及它是如何工作的。

  • 2017-07-26 11:57:00

    Laravel 定时任务

    在 php 中使用定时器是一件不太简单的事情,之前大概只能通过 cron 来实现定时任务。但是在 Laravel5 中,定时任务将会变得很简单。

  • 2017-08-03 21:16:46

    Node.js 里面那些遗失的 ES6 特性

    其实 Node.js 对 ES6 的很多特性都已经开始支持了。 在 Node.js 使用的 JS 引擎 V8 里面将不同状态 ES6 特性分成了 3 个等级: