Vue中混入的使用詳情

官方哈哈發表於2020-10-12
Vue

雖然在專案中很少用到混入的使用，但還是記錄一下關於vue中混入的使用。

簡介：先來講講什麼是混入吧，借用vue官方的回答就是。混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。混入物件可以包含任意元件選項。當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。通過閱讀官方我個人結合demo的理解，就是將混入物件中的資料以及一些方法結合到元件中，可以理解為將這個兩種東西融合為一體！

接下來我們通過demo來加深理解：

鉤子函式的共存

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
var myMixins={//定義一個混入物件
  data(){
    return{
    msg:"湖人總冠軍!",
    msg1:"Tocat tuseday!"
    }
  },
  created(){
    console.log("混入中的生命週期")
  }
}
export default {
  mixins: [myMixins],//將混入物件引入到元件中
  data(){
    return{
      msg:'元件中的data',
      msg2:'未退出！'
    }
  },
  created(){
    console.log("元件的生命週期函式！！")

  }
}
</script>
<style lang="scss">
</style>
   // 混入中的生命週期
    //  元件的生命週期函式！！

通過這個demo我們會發現兩者的生命週期函式都列印了。

資料物件共存：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
var myMixins={
  data(){
    return{
    msg:"湖人總冠軍!",
    msg1:"Tocat tuesday,嚶嚶嚶"
    }
  },
  created(){
    console.log(this.msg1)
    console.log("訪問元件中的data資料：",this.msg2)
  }
}
export default {
  mixins: [myMixins],
  data(){
    return{
      msg:'元件中的data',
      msg2:'未退出！'
    }
  },
  created(){
    console.log("訪問混入中的資料：",this.msg1)
    console.log("元件的生命週期函式！！"+this.msg)
  }
}
</script>
<style lang="scss">
</style>

輸出：
在這裡插入圖片描述
普通方法混入：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
<script>
var myMixins={
  data(){
    return{
   
    }
  },
  methods: {
            mixin: function() {
                console.log('混入中的方法')
            },
            mixinTwo: function () {
                console.log('js好啊，js可以做前端 js可以做後端 js還可以做移動端...')
            }
}
}
export default {
  mixins: [myMixins],
  data(){
    return{
  
    }
  },
   methods: {
            mixin: function () {
                console.log('#app!!')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
}

</script>
<style lang="scss">
</style>

效果：
在這裡插入圖片描述
通過效果圖不難發現，當混入物件和元件方法鍵名衝突時，取元件方法

區域性混入：
在是實際的專案開發中我們可以，將混入物件定義一個單獨的檔案，例如：
在 components 目錄下建立一個mixins資料夾，並在 mixins 目錄下建立一個 mixin.js 檔案：

const mixin = {
  data() {
    return {
      msg: '我曾踏足山巔，也曾跌落低谷，二者都讓我受益良多'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，這是mixin混入的方法')
    }
  }
}
export default mixin//將混入進行匯出

此時就可以在需要的檔案中進行匯入並且通過mixins: [mixin]引入到檔案中。

混入的全域性引入：

<body>
    <div id="app"></div>
</body>
</html>
<script src="./vue.js"></script>
<script>
    Vue.mixin({
        methods: {
            mixinOne: function() {
                console.log('mixinOne')
            }    
        }
    })
    new Vue({
        el: '#app',
        methods: {
            mixinTwo: function () {
                console.log('mixinTwo')
            }
        },
        mounted() {
            this.mixinOne()
            this.mixinTwo()
        }
    })
    
	// mixinOne
	// mixinTwo
</script>

2.   在 main.js 中寫入如下程式碼

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.mixin({
  data() {
    return {
      msg: '哈哈'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，這是mixin混入的方法')
    }
  }
})

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
})

3.最後就可以在元件中直接使用：

<template>
	<div>{{msg}}</div>
</template>
<script>
export default {
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// 哈哈，這是mixin混入的方法
</script>

相關文章