博客 / 詳情

返回

[Vue] 特性學習-混入和插件

在項目的main.js文件中,有可能會出現
image.png
Vue.mixin(customizedMixin);...
new Vue(...);
這裏的Vue.mixin()方法是將引入的customizedMixin文件(主要是customizedMixin文件中的全局方法、生命週期鈎子中的特殊處理、以及其他屬性如data、watch等等)掛載到全局。

當全局引入的customizedMixin中有部分函數、同名變量的定義在子組件中也同時存在,那麼子組件的方法、同名變量會覆蓋全局引入的customizedMixin。
舉例如下:
// customizedMixin.js
data() {return { a: 3 }}

// Child.vue
<script>
data() {return { a: 666 }}
...
mounted() {
console.log(this.a); // 666
}
</script>

如果有部分通用的功能不需要全局混入,也可以在組件內通過與components、data、computed同級的mixins屬性引入。用法如下。
// ChildA.vue
components: {},
mixins: [commonFuncMixin, windowSizeMixin],
data() {},
computed: {}

在項目的main.js文件中,大概率能看到
Vue.use()
image.png
上面的VideoPlayer我們稱它為插件(Plugin)

插件本質上是一個函數。它接受Vue實例作為第一個參數,也接受第二個可選參數。
形如function(Vue, options) {}
image.png

一般情況下,我們用對象的形式提供插件。並通過Vue.use()方法使用
image.png
Vue.use()方法調用了插件裏的install()方法實現了全局混入。

同步更新到自己的語雀,格式好看點。
https://www.yuque.com/diracke...

user avatar
0 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.