mixin混合

在日常開發(fā)中，當我們開發(fā)的各種組件可能會有相同的內容，我們可以將相同的內容在各個相對應的組件內刪除，然后放在同一個配置里。所謂混合：兩個或多個組件共享一個配置。當然這個配置文件的名字可以自定義，為了具體語義化，我將這個文件名命名mixin，當然看個人喜好。

配置混合文件 mixin.js ，為了加深了解，繼續(xù)在混合文件上添加data數(shù)據(jù)以及添加原組件data數(shù)據(jù)

// mixin.js
export const mixin = {
    methods:{
        showName(){
            alert(this.name)
        }
    }
}
export const mixin2 = {
    // 混合里面的data的數(shù)據(jù)會和原組件data數(shù)據(jù)進行整合
    data(){
        return {
            x:10, //如果原組件data數(shù)據(jù)本身就有該數(shù)據(jù)，以原組件數(shù)據(jù)為主
            y:10
        }
    }
}

當然混合也不能包容所有配置項或函數(shù)，生命周期函數(shù)就是一個特例： 它不以任何為主，不管是原組件還是混合文件里面的生命周期函數(shù)，只要有都要。

當然混合我們也可以同全局組件一樣寫到全局配置上，這樣我們在混合里面寫到data數(shù)據(jù)或者是methods方法都會寫到vm上，直接使用無需調用。當然這樣肯定是不合理的，所以Vue官方進行解釋：推薦全局mixin應該用于插件開發(fā)，不建議應用使用。

總結：

mixin：混合可以把多個組件共用的配置提取成一個混入對象

使用方式：

1）定義混合文件

2）使用混入文件

局部導入：mixins:['xxx']

全局導入：Vue.mixin(xxx)

PS：這里解釋一下 Vue 的插件 ，所謂Vue的插件類似游戲外掛，讓體驗感更強一些。

功能：用于增強Vue

本質：包含install方法的一個對象，install的第一個參數(shù)是Vue，第二個以后的參數(shù)是插件使用者傳遞的數(shù)據(jù)。

前言

在我們沒使用框架之前，通常一般使用 jquery 來幫助程序員簡化操作DOM的過程，隨著 Vue 的流行，在MVVM模型的影響下，程序員不需要操作DOM只需把數(shù)據(jù)維護好就行(也稱：數(shù)據(jù)驅動視圖)，既然在 Vue 中不需要操作DOM，所以是很少在 Vue 項目中安裝和使用 jquery 的。假設我們在 Vue項目中需要操作DOM怎么辦？這時候就需要看看接下來講解的內容了。

ref的引用DOM

ref用來輔助開發(fā)者在不依賴于 jQuery 的情況下，獲取 DOM 元素或組件的引用。

每個 vue 的組件實例上，都包含一個 $refs 對象，里面存儲著對應的DOM元素或組件的引用。默認情況下，組件的 $refs 指向一個空對象。

<template>
  <div class="app-container">
    <!-- 注意：ref的值是唯一的，如果出現(xiàn)重復后者會覆蓋前者，這點尤為注意 -->
    <h2 ref="myh1">App父組件</h2>
    <button @click="showThis">改變顏色</button>
  </div>
</template>
 
<script>
  export default {  
    methods:{
      showThis(){
        //  console.log(this);
        this.$refs.myh1.style.color = 'red'
      }
    }
  }
</script>

ref引用組件

如果想要使用ref引用頁面上的組件實例，則可以按照如下的方式進行操作：

組件的 $nextTick(cb) 方法，會把 cb 回調推遲到下一個 DOM 更新周期之后執(zhí)行。通俗的理解是：等組件的DOM更新完成之后，再執(zhí)行 cb 回調函數(shù)。從而能保證 cb 回調函數(shù)可以操作到最新 DOM 元素。

<template>
  <div class="app-container">
    <h2>App父組件</h2>
    <input type="text" v-if="inputVisible" @blur="showButton" ref="iptRef">
    <button v-else @click="showinput">點擊顯示輸入框</button>
  </div>
</template>
<script>
  export default {  
    data(){
      return {
        // 默認輸入框隱藏
        inputVisible:false
      }
    },
    methods:{
      showinput(){
        // 切換布爾值，把文本框展示出來
        this.inputVisible = true
        // 讓展示出來的文本框自動獲取焦點
        this.$nextTick(()=>{
          this.$refs.iptRef.focus()
        })
      },
      showButton(){
        this.inputVisible = false
      }
    },
  }
</script>
 
 

總結：

ref屬性：被用來給元素或者子組件注冊引用信息(id的替代者)，應用在html標簽上獲取的是真實DOM元素，應用在組件標簽上是組件實例對象(vc)

使用方式：

打標識：<h1 ref="xxx">...</h1> 或  <Test ref="xxx"></Test>

獲取：this.$refs.xxx

到此這篇關于Vue混合文件使用以及ref的引用的文章就介紹到這了,更多相關Vue混合文件及ref引用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論