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>

效果:



  • 2018-09-08 16:04:25

    Android SQLiteDatabase使用详细教程

    Android提供了创建和是用SQLite数据库的API。SQLiteDatabase代表一个数据库对象,提供了操作数据库的一些方法。在Android的SDK目录下有sqlite3工具,我们可以利用它创建数据库、创建表和执行一些SQL语句。下面是SQLiteDatabase的常用方法。SQLiteDatabase的常用方法方法名称方法表示含义openOrCreateDatabase(Stringpath,SQLiteDatabase.CursorFactoryfactory)

  • 2018-09-09 02:25:09

    单例模式的好处和缺点?为什么要用单例模式?

    单例模式是一种常用的软件设计模式。在它的核心结构中只包含一个被称为单例类的特殊类。通过单例模式可以保证系统中一个类只有一个实例而且该实例易于外界访问,从而方便对实例个数的控制并节约系统资源。如果希望在系统中某个类的对象只能存在一个,单例模式是最好的解决方案。

  • 2018-09-09 02:31:48

    基于VCamera,仿微信录制短视频

    基于VCamera,Android仿微信录制短视频,如果喜欢请star,如果觉得有纰漏请提交issue,如果你有更好的点子可以提交pull request。

  • 2018-09-13 22:24:04

    QQ微信登录失败,报100044错

    我用的mob的maven集成方案,说实在的从一开始用maven集成方案就是一个坑啊。每次build都会重新加载所有maven包,后来通过gradle offline总算解决了。

  • 2018-09-26 15:14:23

    PHP JSON_ENCODE 不转义中文汉字的方法

    PHP 生成JSON的时候,必须将汉字不转义为 \u开头的UNICODE数据。 网上很多,但是其实都是错误的,正确的方法是在json_encode 中加入一个参数 JSON_UNESCAPED_UNICODE