Declaring mixin in Vue.js requires the mixins option to be used in the export default {} of the component. The specific steps are as follows: 1. Define a mixin object containing data, methods, life cycle hooks, etc.; 2. Introduce it through mixins: [mixin] in the component, supporting inline definitions or importing from files; 3. You can use multiple mixins at the same time, and the order of the mixin is affected, and the later mixin and the component's own attributes are preferred; 4. Pay attention to naming conflicts, the component attributes will overwrite the attributes of the same name in the mixin, and the life cycle hooks will be executed in turn, mixin first and then the component.

In Vue.js, especially when working with Vue 2 or even in some scenarios of Vue 3 using the Options API, mixins are a common way to reuse logic across components. Declaring them inside export default {} is straightforward — you just use the mixins option.

Here's how it works:

Basic structure of a mixin

First, a mixin is usually a JavaScript object that contains options like data , methods , created , etc. You can define it inline or import it from another file.

Example of an inline mixin:

 const myMixin = {
  data() {
    return {
      sharedData: 'This comes from a mixin'
    }
  },
  methods: {
    sayHello() {
      console.log('Hello from mixin!')
    }
  }
}

Then, in your component:

 export default {
  mixins: [myMixin],
  // rest of component options
}

Now, everything defined in myMixin becomes part of your component.

How to use multiple mixins

You can include more than one mixin by simply adding them as additional items in the array:

 export default {
  mixins: [myMixin, anotherMixin, yetAnotherMixin],
  // ...
}

Just keep in mind that if multiple mixins and the component itself define the same options (like methods or hooks such as created ), then the component's own options take priority , and the mixins are merged in the order they appear in the array. So earlier mixins can be overridden by later ones or by the component itself.

When to use local vs imported mixins

If you're reusing logic across multiple files, it makes sense to define the mixin in its own file and import it. For example:

myMixin.js

 export default {
  data() {
    return {
      reusableData: true
    }
  }
}

MyComponent.vue

 import myMixin from './mixins/myMixin'

export default {
  mixins: [myMixin],
  // ...
}

This keeps things clean and modular.

But for small, one-off cases where a mixin is only used in one place, defining it directly inside the component file is totally fine too.

Watch out for naming conflicts

One thing to be careful about is mixing in multiple objects that have overlapping method or data property names. Vue tries to merge them intelligently, but in general:

• For data , methods , components , etc., the component's own properties will override those from mixins.
• For lifecycle hooks like created , mounted , etc., all of them will run — first the mixin's hook, then the component's.

So if you have:

 const mixin = {
  created() {
    console.log('Mixin created')
  }
}

export default {
  mixins: [mixin],
  created() {
    console.log('Component created')
  }
}

The output will be:

 Mixin created
Component created

That's useful for extending behavior without breaking anything, but can also lead to confusion if you're not expecting it.

So putting it all together, declaring a mixin inside export default {} is just a matter of including it in the mixins array. Whether you define it inline or import it depends on how reusable it is. Just remember how merged works, and avoid name clashes unless you're doing it intentionally.

Basically that's it.

The above is the detailed content of How to declare mixins within ?. For more information, please follow other related articles on the PHP Chinese website!