21. Mix in details

1. Hook function

The hook of the object will be called before the component itself hooks

App page

<template>
  <div class="app">
  </div>
</template>
<script>
  import mixin from "@/mixins/mixin";
  export default {
      name: "App",
      mixins: [mixin],
      data() {
        return {
          a1: "1",
          a3: "3"
        }
      },
      created() {
        console.log("App created ",this.a1)
        console.log("App created ",this.a2)
      }
  }
</script>

mixin.js

<template>
  <div class="app">
  </div>
</template>
<script>
  import mixin from "@/mixins/mixin";
  export default {
      name: "App",
      mixins: [mixin],
      data() {
        return {
          a1: "1",
          a3: "3"
        }
      },
      created() {
        console.log("App created ",this.a1)
        console.log("App created ",this.a2)
      }
  }
</script>

Result chart ：

  From this, we can know that the hook of the mixed object will call before its own hook , And mixin Can print App in a3 Value

2. Common method consolidation

When the blend value is the option of the object , for example methods、components、directive, Will be mixed into an object , When two object key names conflict , Take the key value pair of the component object

APP page

<template>
  <div class="app">
  </div>
</template>
<script>
  import mixin from "@/mixins/mixin";
  export default {
      name: "App",
      mixins: [mixin],
      data() {
        return {
          a1: "1",
          a3: "3"
        }
      },
      methods: {
        test: function() {
          console.log("App test")
        }
      },
      mounted() {
        this.test()
        this.test2()
      }
  }
</script>

mixin.js

const mixin = {
    data() {
        return {
           
        }
    },
    methods: {
        test: function() {
            console.log("mixin test")
        },
        test2: function() {
            console.log("mixin test2")
        }
    },
}
export default mixin;

3. To mix in partially

Components

<template>
	<div>{
   {msg}}</div>
</template>
<script>
import mixin from '../mixins/mixin'
export default {
	mixins: [mixin],
    data() {
      return {
      }
  },
	mounted() {
		this.mixinMethod()
	}
}

mixin

const mixin = {
    data() {
      return {
        msg: "hello"
      }
    },
    methods: {
      test1() {
        console.log("mixin ", this.msg)
      }
    }
  }
  export default mixin;

4. The whole thing is in

stay main.js Add the following code

Vue.mixin({
    data() {
        return {
            msg: "hello"
        }
    },
    methods: {
        test1() {
            console.log("mixin test1")
        }
    }
})

Reference directly in the component

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

5. summary

（1） function ： The configuration shared by multiple components can be extracted into a mixed object

（2） Usage mode ：

        The first step is to define the blend ：

        {

                data() {...},

                methods: {...}

        }...

        Step 2 use blending ：

                The whole thing is in ：Vue.mixin(xxx)

                To mix in partially ：mixins:['xxx']