---- Vue in mixin usage Detailed ----

I speak a little understanding of the next vue in the mixin

  vue provides a hybrid mechanism --mixins, for a more efficient implementation of a reusable component content. At first I was thinking this is like nothing different components. . Later I found wrong. Let us look at the introduction of the components under ordinary circumstances mixins and what is the difference?

     It corresponds to open after assembly incorporated within parent components of a separate space to perform a corresponding operation according to the value of parent element over the props, or both essentially entirely on a single, relatively independent.

     And mixins is after the introduction of the component, the content of components sucked inside the respective content attributes, such as data or the like, method and the like are merged parent components. Corresponds to the introduction, the various properties of the parent component of methods have been expanded.

     Simple component references:

          + Parent component subassembly >>> parent element subassembly +

     mixins:

          + Parent component subassembly >>> new parent component

Action: a plurality of components can share data and methods, the introduction of the assembly for use in a mixin, mixin the methods and properties also are incorporated into the assembly, it can be used directly. Hook function will both be called, mixin hook in the first execution.

Here to introduce the use of vue mixin, specific description is as follows:

1. Define a js file (mixin.js)

?
1
2
3
4
5
6
7
8
9
10
11
12
export  default  {
  data() {
   return  {
    name:  'mixin'
   }
  },
  created() {
   console.log( 'mixin...' this .name);
  },
  mounted() {},
  methods: {}
}

For the uses, vue document in detail, but here only describes how to use mixin in a vue file.

2. Use the mixin in vue file

?
1
2
3
4
import  '@/mixin' // 引入mixin文件
export  default  {
  mixins: [mixin]
}

Guess you like

Origin www.cnblogs.com/zjy850984598/p/11355668.html