国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue -- Mixin

LeviDing / 2473人閱讀

摘要：有兩個非常相似的組件，他們的基本功能是一樣的，可以局注冊一個混合，影響注冊之后所有創(chuàng)建的每個實例，這就是。全局下注冊比如在構(gòu)建的項目中，中定義了一個并且掛載在實例上，那么在實例下的每個組件都會在掛載的時候執(zhí)行一次這個方法，輸出多次

mixins

mixin: 有兩個非常相似的組件，他們的基本功能是一樣的，可以局注冊一個混合，影響注冊之后

所有創(chuàng)建的每個 Vue 實例，這就是mixin。

Mixin對編寫函數(shù)式風(fēng)格的代碼很有用，一般情況下不會改變函數(shù)作用域外部的任何東西，輸入相同，得到的結(jié)果也一定相同。

基礎(chǔ)用法

新建一個mixin.js 文件，

 minix.js
  
 export const myminix= {
       data(){
           return {
           }
       },
       mounted(){
          this.sayhello();
       },
       created(){

       },
       methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
       }
}

一個簡單的方法，在組件被掛載后 輸出 “hello”,

然后在想要使用這個公共方法的組件中引入進(jìn)去。

other.vue

script:

export default {
 mixins:[myminix],
}

這樣引入后的效果，就是在other的組件中，同樣加入了sayhello() 方法

other.vue

script:

export default {
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from myMinix!");
           }
}

//output  "hello from myMinix"

在other 組件被掛載后，輸出hello from myMinix,

沖突

到這里，會有一個問題，如果other.vue 本身也有同樣是操作掛載在mounted 上，到底誰會先執(zhí)行，

other.vue

script:

export default {
    mixins:[myminix],
    mounted(){
              this.sayhello();
           },
    methods:{
           sayhello:function(){
              console.log("hello from other instance!");
           }
}

//output  "hello from myMinix"
//output  "hello from myMinix"

輸出了兩次一樣的結(jié)果，都來自other 組件， 第一個函數(shù)被調(diào)用時，沒有被銷毀，它只是被重寫了。我們在這里調(diào)用了兩次sayhello()函數(shù)。

全局下注冊minix

比如在 vue-cli 構(gòu)建的項目中，main.js 中定義了一個minix,并且掛載在vue 實例上，

 Vue.mixin({
      mounted() {
         console.log("hello from other");
      }
 })

 new Vue({
    

  })

那么在 Vue 實例下的每個組件都會 在掛載的時候執(zhí)行一次這個方法，輸出多次 “hello from other”

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/87249.html

相關(guān)文章

  • 【Vue原理】Mixin - 白話版

    摘要：而我覺得現(xiàn)在出一個白話版，是讓大家有興趣去研究源碼的時候，可以提前理清一下思路。相當(dāng)于封裝，提取公共部分。顯然，今天我不是來教大家怎么用的，怎么用看文檔就好了，我是講解生命的真諦內(nèi)部的工作原理。而這個不會合并，直接替換掉整個選項 寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和 源碼版，白話版助于理解工作原理，源碼版助于了解內(nèi)部詳情，讓我們一起學(xué)習(xí)吧研究基于 Vue版...

    CollinPeng 評論0 收藏0

  • JS每日一題: Vue中mixin怎么理解？

    摘要：兩個對象鍵名沖突時，取組件對象的鍵值對也使用同樣的策略進(jìn)行合并。代碼理解全局混合也可以全局注冊混合對象。注意使用一旦使用全局混合對象，將會影響到所有之后創(chuàng)建的實例為自定義的選項注入一個處理器。 20190122 Vue中mixin怎么理解？ mixin是為了讓可復(fù)用的功能靈活的混入到當(dāng)前組件中，混合的對象可以包含任意組件選項（生命周期，指令之類等等）, mixin翻譯過來叫混合,高級的...

    jubincn 評論0 收藏0

  • 如何正確的(?)利用 Vue.mixin() 偷懶

    摘要：前言最近開發(fā)的頁面以及功能大都以表格為主，接口獲取來的數(shù)據(jù)大都是需要經(jīng)過處理，比如時間戳需要轉(zhuǎn)換，或者狀態(tài)碼的轉(zhuǎn)義。首先，還是在文件中定義一個狀態(tài)碼對應(yīng)對象，這里我們將其對應(yīng)的內(nèi)容設(shè)為段落。 前言 最近開發(fā)的頁面以及功能大都以表格為主，接口獲取來的 JSON 數(shù)據(jù)大都是需要經(jīng)過處理，比如時間戳需要轉(zhuǎn)換，或者狀態(tài)碼的轉(zhuǎn)義。對于這樣的問題，各大主流框架都提供了類似于過濾的方法，在 Vue ...

    Leo_chen 評論0 收藏0

  • Vue官網(wǎng)教程疑難解析

    摘要：利用可以對組件代碼進(jìn)行抽離及封裝。注如果傳入的是鉤子函數(shù)，則按照數(shù)組的順序依次執(zhí)行鉤子函數(shù)，且會在組件之前執(zhí)行跟淺拷貝的順序有出入頁面執(zhí)行時，依次會打印 主要摘錄的是Vue教程中的疑難點，結(jié)合demo來加深概念的理解（持續(xù)更新！） 箭頭函數(shù)在Vue中使用 不要在選項屬性或回調(diào)上使用箭頭函數(shù)(demo01) var vm1 = new Vue({ data: { ...

    wow_worktile 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<