Vue的组件化之notification组件/Vue.extend()

2020-03-11 21:22:36

参考地址 学习笔记——Vue的组件化之notification组件/Vue.extend()

学习笔记——Vue核心技术Vue+Vue-Router+Vuex+SSR实战精讲


一、把组件的内部结构写好,写成一个vue文件notification.vue。

二、全局设置组件属性。//如果后面不需要直接引入组件的方式调用,可以不用全局注册

index.js中一般写的是需要全局设置的属性。


import Notification from './notification.vue';


export default (Vue) => {

// 全局注册,在整个全局都可以使用这个component

    Vue.component(Notification.name, Notification);

}

1

2

3

4

5

6

调用

import Notification from './components/notification/index'

Vue.use(Notification); //因为export的是一个函数,所以需要用use调用

1

2

三、创建func-notification.js用于给组件添加属性,继承父类组件

四、创建function.js用于写方法,使得调用方法可以创建组件

1、通过var constructor = Vue.extend(func-notification)方法传入组件实例,可以通过new constructor()方法创建组件。

2、创建一个方法,用于创建组件与对组件的额外操作等。


const notify = (options) => {

    const instance = new NotificationConstructor({}); //instance是实例对象

}

1

2

3

3、传递属性。可直接设置propsData: options


五、把notify方法放到vue.prototype中,使得可以全局调用。

// index.js

    Vue.prototype.$notify = notify;

1

2

点赞



  • 2021-01-14 06:15:04

    通过glide获取图片显示后的真正宽高

    有时候需要获取网络图片的宽高来设置图片显示的大小,很多人会直接利用Glide的加载监听去拿图片的宽高,但是这样拿到的不是图片真正的宽高,而是图片显示在ImageView后的宽高。如下:

  • 2021-01-14 09:38:57

    Chrome插件详细教程

    严格来讲,我们正在说的东西应该叫Chrome扩展(Chrome Extension),真正意义上的Chrome插件是更底层的浏览器功能扩展,可能需要对浏览器源码有一定掌握才有能力去开发。鉴于Chrome插件的叫法已经习惯,本文也全部采用这种叫法,但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。

  • 2021-01-14 17:07:51

    chrome.contextMenus.create不出现菜单

    主要原因是,我每次刷新玩,都复制一下右键,然而并没有出现菜单,一度颓废啊,因为demo,还有其他人的文章都是这样的。 哎,后来发现是这样的,我缺少了contexts选项。其实我是成功了,我现在只要不选择文字,直接点右键,菜单已经出现了哦。

  • 2021-01-15 13:06:08

    监控 MongoDB -

    随着MongoDB中保存的数据越来越多,对MongoDB服务状态的监控也越来越重要,经常关注服务是否健康,才能防止故障以及优化。

  • 2021-01-15 13:30:21

    MongoDb web 用户界面

    MongoDB 的 Web 界面访问端口比服务的端口多1000。 如果你的MongoDB运行端口使用默认的27017,你可以在端口号为28017访问web用户界面,即地址为:http://localhost:28017。

  • 2021-01-16 09:31:14

    Xcode两种引入图片的方法

    如果是纯代码,图片名需要手动添加@2x,@3x等倍数标识,且需要指明后缀.png,.jpg;IB添加图片的话只需要指明后缀就好,不用添加倍数标识。