欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue 中mixin 的用法詳解

 更新時間：2018年04月23日 10:24:56   投稿：mrr  
e中提供了一種混合機制--mixins，用來更高效的實現(xiàn)組件內(nèi)容的復用。這篇文章主要介紹了Vue mixin 的用法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

說下我對vue中mixin的一點理解

　　vue中提供了一種混合機制--mixins，用來更高效的實現(xiàn)組件內(nèi)容的復用。最開始我一度認為這個和組件好像沒啥區(qū)別。。后來發(fā)現(xiàn)錯了。下面我們來看看mixins和普通情況下引入組件有什么區(qū)別？

     組件在引用之后相當于在父組件內(nèi)開辟了一塊單獨的空間，來根據(jù)父組件props過來的值進行相應的操作，單本質(zhì)上兩者還是涇渭分明，相對獨立。

     而mixins則是在引入組件之后，則是將組件內(nèi)部的內(nèi)容如data等方法、method等屬性與父組件相應內(nèi)容進行合并。相當于在引入后，父組件的各種屬性方法都被擴充了。

     單純組件引用：

          父組件 + 子組件 >>> 父組件 + 子組件

     mixins：

          父組件 + 子組件 >>> new父組件

作用：多個組件可以共享數(shù)據(jù)和方法，在使用mixin的組件中引入后，mixin中的方法和屬性也就并入到該組件中，可以直接使用。鉤子函數(shù)會兩個都被調(diào)用，mixin中的鉤子首先執(zhí)行。

下面給大家介紹vue mixin的用法，具體介紹如下所示：

1.定義一個 js 文件(mixin.js)

export default {
 data() {
  return {
   name: 'mixin'
  }
 },
 created() {
  console.log('mixin...', this.name);
 },
 mounted() {},
 methods: {}
}

關(guān)于用法，vue文檔中有詳細的介紹，這里只介紹怎么在一個vue文件中使用mixin。

2.在vue文件中使用mixin

import '@/mixin'; // 引入mixin文件
export default {
 mixins: [mixin]
}

總結(jié)

以上所述是小編給大家介紹的Vue 中mixin 的用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評論