vue mixin 混入

若是在A組件和B組件中有相同的data屬性、method方法等，能夠將公共部分抽離出來，這就是mixin的做用

A組件：

<template>
  <div>
    <p>{{ aData }}</p>
    <p>{{ commonData }}</p>
    <button @click="aMethod">aMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      aData: '組件A的數據',
      commonData: '公共的數據'
    }
  },
  methods: {
    aMethod() {
      console.log('A的方法')
    },
    commonMethod() {
      console.log('公共的方法')
    }
  },
  mounted() {
    console.log('A-mounted')
    console.log('公共的mounted')
  }
}
</script>

B組件：

<template>
  <div>
    <p>{{ bData }}</p>
    <p>{{ commonData }}</p>
    <button @click="bMethod">bMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      bData: '組件B的數據',
      commonData: '公共的數據'
    }
  },
  methods: {
    bMethod() {
      console.log('B的方法')
    },
    commonMethod() {
      console.log('公共的方法')
    }
  },
  mounted() {
    console.log('B-mounted')
    console.log('公共的mounted')
  }
}
</script>

能夠看到，A、B組件中的commonData屬性、commonMethod方法、mounted中打印的語句均可以抽出來：

在src下新建mixin/index.js：

export default {
  data() {
    return {
      commonData: '公共的數據'
    }
  },
  methods: {
    commonMethod() {
      console.log('公共的方法')
    }
  },
  mounted() {
    console.log('公共的mounted')
  }
}

在A組件中引入mixin，此時將公共部分的內容刪除和原來的結果同樣：

<template>
  <div>
    <p>{{ aData }}</p>
    <p>{{ commonData }}</p>
    <button @click="aMethod">aMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
import mixin from '../mixin'
export default {
  data() {
    return {
      aData: '組件A的數據'
    }
  },
  methods: {
    aMethod() {
      console.log('A的方法')
    }
  },
  mounted() {
    console.log('A-mounted')
  },
  mixins: [mixin]
}
</script>

B組件中同理，可是若是說B組件中和mixin傳來的有相同數據，B組件中的數據優先級高：

<template>
  <div>
    <p>{{ bData }}</p>
    <p>{{ commonData }}</p>
    <button @click="bMethod">bMethod</button>
    <button @click="commonMethod">commonMethod</button>
  </div>
</template>
<script>
import mixin from '../mixin'
export default {
  data() {
    return {
      bData: '組件B的數據',
      commonData: '公共的數據11'
    }
  },
  methods: {
    bMethod() {
      console.log('B的方法')
    },
    commonMethod() {
      console.log('公共的方法11')
    }
  },
  mounted() {
    console.log('B-mounted')
    console.log('公共的mounted11')
  },
  mixins: [mixin]
}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

經過mixins引入組件後，會給當前組件 額外擴展一些屬性和方法，簡單的說就是給組件額外添加了一個BUFF

 

    場景：封裝插件的時候用mixin

 

    mixin----全局使用

    mixins----局部使用

 

    步驟：

        ①utils下新建mixin.js：

            export default {
                // new Vue()中的配置項均可以在這裏加
                data(){
                    return{
                        title:"我是額外提供的一個屬性"
                    }
                },
                created() {
                    console.log("我是一個buff")
                }
            }

        ②App.vue中引入：

            import Mixin from "./utils/mixin.js";

        ③添加mixins屬性：

            mixins:[Mixin],

 

        此時在created中就多一個console.log打印，在App.vue頁面能夠直接使用title屬性，就和寫在本身的data中同樣。