学习笔记——Vue的组件化之notification组件
2018-12-28 10:32
302 查看
一、把组件的内部结构写好,写成一个vue文件notification.vue
。
二、全局设置组件属性。//如果后面不需要直接引入组件的方式调用,可以不用全局注册
index.js中一般写的是需要全局设置的属性。
import Notification from './notification.vue'; export default (Vue) => { // 全局注册,在整个全局都可以使用这个component Vue.component(Notification.name, Notification); }调用
import Notification from './components/notification/index' Vue.use(Notification); //因为export的是一个函数,所以需要用use调用
三、创建func-notification.js
用于给组件添加属性,继承父类组件
四、创建function.js
用于写方法,使得调用方法可以创建组件
1、通过
var constructor = Vue.extend(func-notification)方法传入组件实例,可以通过
new constructor()方法创建组件。
2、创建一个方法,用于创建组件与对组件的额外操作等。
const notify = (options) => { const instance = new NotificationConstructor({}); //instance是实例对象 }
3、传递属性。可直接设置
propsData: options
五、把notify方法放到vue.prototype中,使得可以全局调用。
// index.js Vue.prototype.$notify = notify;
相关文章推荐
- vuex--学习笔记(二)在组件中如何获取vuex的state对象中的属性
- vue自定义组件和列表循环--vue学习笔记
- vue学习笔记 - 组件通信01
- Vue 2.0学习笔记:实现组件数据的双向绑定
- vue学习笔记3 -----组件
- 【音乐App】—— Vue-music 项目学习笔记:播放器内置组件开发(二)
- 【音乐App】—— Vue-music 项目学习笔记:歌曲列表组件开发
- Vue组件学习笔记
- Vue学习笔记——实例和内置组件【转自jspang】
- Vue学习笔记——指令和部分组件
- Vue学习笔记进阶篇之函数化组件解析
- Vue 2.0学习笔记:Vue组件内容分发(slot)
- Vue.js学习笔记:组件
- Vue.js学习笔记-1-组件
- vue学习笔记之——v-for与局部组件的传值
- Vue 学习笔记 — 组件初始化
- Vue.js第四天学习笔记(组件)
- Vue 2.0学习笔记:组件的使用
- vue 学习笔记 part-6 - > 组件
- vue.js学习笔记(三)--父子组件通信总结