學習筆記——Vue的元件化之notification元件
阿新 • • 發佈:2019-01-08
一、把元件的內部結構寫好,寫成一個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;