• This is the 7th day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

Mixed with

basis

Mixins provide a very flexible way to distribute reusable functionality in Vue components. A mixin object can contain any component option. When a component uses mixin, all mixin options are “blended” into the component’s own options.

var minxin = {
  created () {
    this.hello();
  },
  methods: {
    hello () {
      console.log('Hello, I'm a function mixed in');
    },
  }
}

Vue.component('my-cmp', {
  mixins: [mixin],
  template: ` 
      

       xx
      
 `
})
Copy the code

Option to merge

When components and mixins have options with the same name, those options are “merged” in the appropriate way.

Merge data with component data in preference:

var mixin = {
  data () {
    return {
      msg: 'hello',}}}new Vue({
  mixins: [mixin],
  data: {
    msg: 'goodbye',},created: function () {
    console.log(this.msg)
})
Copy the code

Merge hook functions that merge into an array. Call the hooks embedded in the object first, then call the component’s own hooks.

var mixin = {
  created () {
    console.log('Mixin object hook')}}new Vue({
  el: '#app'.mixins: [mixin],
  created () {
    console.log('Component hook')}})Copy the code

Options that merge values into objects, such as methods, components, and so on, will be merged into the same object. When two object key names conflict, the component object’s key-value pair is taken.

With global

Mixin can also be registered globally. Use with extreme care! Once global mixin is used, it affects every subsequent Vue instance created. When used appropriately, this can be used to inject processing logic for custom options.

 // Inject a handler for the custom option 'myOption'.
Vue.mixin({
  created () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})

new Vue({
  myOption: 'hello! '
})
Copy the code

Use global mixin with caution, as it affects each individually created Vue instance (including third-party components). In most cases, this should only apply to custom options.

Custom instruction

Introduction to the

We can write our own custom instructions to manipulate DOM elements for code reuse purposes. Note that in Vue, the main form of code reuse and abstraction is components. However, there are cases where you still need to perform low-level operations on normal DOM elements, and custom directives are used.

Global registration directive:

Vue.directive('focus', { / * * * / })
Copy the code

Local registration instruction

const vm = new Vue({
  el: '#app'.directives: {
    focus: { / * * * /}}})Copy the code

Use:

<input v-focus></input>
Copy the code

For example, write an autofocus input box:

Vue.directive('focus', {
   // executes when the bound element is inserted into the DOM
  inserted: function (el) { el.focus(); }})Copy the code

At this point, auto-focus can be achieved using the V-focus directive on the input element.

In the next section, we’ll talk about custom directives. See you in the next section

The last

If it is helpful to you, I hope to give you a 👍 comment/collection/three even!

Bloggers are honest and answer questions for free ❤