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

点赞



  • 2020-05-24 08:10:18

    echarts标题(title)配置

    show:true,//显示策略,默认值true,可选为:true(显示) | false(隐藏) text: '主标题',//主标题文本,'\n'指定换行 link:'',//主标题文本超链接,默认值true target: null,//指定窗口打开主标题超链接,支持'self' | 'blank',不指定等同为'blank'(新窗口) subtext: '副标题',//副标题文本,'\n'指定换行 sublink: '',//副标题文本超链接

  • 2020-06-02 08:57:12

    clipboard复制成功但是粘贴板是空的

    将文本复制到剪贴板应该不难。配置它不需要几十个步骤,也不需要加载数百KB的js文件 。但最重要的是,它不应该依赖Flash或任何臃肿的框架。这就是clipboard.js存在的原因。