首頁 > web前端 > js教程 > 主體

在Vue內使用mixin

php中世界最好的语言
發布: 2018-06-06 14:19:45
原創
1500 人瀏覽過

這次帶給大家在Vue內使用mixin,在Vue內使用mixin的注意事項有哪些,以下就是實戰案例,一起來看一下。

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

  vue中提供了一個混合機制--mixins,用來更有效率的實作元件內容的重複使用。最開始我一度認為這個和組件好像沒啥差別。 。後來發現錯了。下面我們來看看mixins和普通情況下引入元件有什麼區別?

     組件在引用之後相當於在父組件內開闢了一塊單獨的空間,來根據父組件props過來的值進行相應的操作,單本質上兩者還是涇渭分明,相對獨立。

     而mixins則是在引入元件之後,則將元件內部的內容如data等方法、method等屬性與父元件對應內容合併。相當於在引入後,父組件的各種屬性方法都被擴充了。

     單純元件參考:

          父元件子元件>>> 父元件子元件

   >> new父元件

作用:多個元件可以共享資料和方法,使用mixin的元件中引入後,mixin中的方法和屬性也被併入到該元件中,可以直接使用。鉤子函數會兩個都被調用,mixin中的鉤子會先執行。

下面要介紹vue mixin的用法,具體介紹如下所示:

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

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

關於用法,vue文檔中有詳細的介紹,這裡只介紹怎麼在一個vue檔中使用mixin。

2.在vue檔案中使用mixin

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

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

vue router動態路由運算子路由


使用Vue動態設定路由參數

以上是在Vue內使用mixin的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板