Mixin\ plug in \scoped style

One .mixin

Also known as mixing

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

Usage method ：

The first step is to define the blend , for example ：

{

data(){...}

methods:{}

......

}

Step 2 use blending , for example

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

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

MyStudent.vue

<template>
  <div>
   
      <h2 @click = "showName"> The student's name :{
   {name}}</h2>
      <h2> Student gender :{
   {sex}}</h2>
  </div>
</template>

<script>
import {hunhe} from '../mixin'
export default {
    name:"MyStudent",
    data(){
        console.log(this)
        return {
            name:' Zhang San ',
            sex:' male '
        }
    },
    
    mixins:[hunhe]
    
}
</script>

MySchool.vue

<template>
  <div>
     
      <h2 @click = "showName"> School name :{
   {name}}</h2>
      <h2> School address :{
   {address}}</h2>
  </div>
</template>

<script>
import {hunhe} from '../mixin'
export default {
    name:"MySchool",
    data(){
        console.log(this)
        return {
            name:' Silicon Valley ',
            address:' Beijing ',
            x:666
        }
    },
    
   mixins:[hunhe],
   mounted(){
       console.log(" How do you do !!!!!!")
   }
    
}
</script>

mixin.js

export const hunhe= {
    data() {
		return {
			x:100,
			y:200
		}
	},
    methods: {
		showName(){
            alert(this.name)
        }
    },
    mounted() {
		console.log(' How do you do ！')
	},
}
// export const hunhe2 = {
// 	data() {
// 		return {
// 			x:100,
// 			y:200
// 		}
// 	},
// }

main.js

import Vue from 'vue'
import App from './App.vue'
import {hunhe} from './mixin'
Vue.config.productionTip = false
Vue.mixin(hunhe)

new Vue({
	el:'#app',
	render: h => h(App)
})

App.vue Just import student and school components into

（1）data Data mixing , If not , Mixed with , Additional data . If there was this variable , Mixing also has variables , In the original component data Variable dominated

（2） Life cycle mounted in , If the mixed and original components share functions , Both , And the functions of the original component are executed first . Execute after mixing

Two . plug-in unit

|-- App.vue
|-- components
|   |-- School.vue
|   `-- Student.vue
|-- main.js
`-- plugins.js

plugins.js

export default {
	install(Vue,x,y,z){
		console.log(x,y,z)
		// Global filter 
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		// Define global instructions 
		Vue.directive('fbind',{
			// When an instruction is successfully bound to an element （ at first ）
			bind(element,binding){
				element.value = binding.value
			},
			// When the element of the instruction is inserted into the page 
			inserted(element,binding){
				element.focus()
			},
			// When the template of the instruction is parsed again 
			update(element,binding){
				element.value = binding.value
			}
		})

		// Define blend 
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		// to Vue Add a method to the prototype （vm and vc It'll work ）
		Vue.prototype.hello = ()=>{alert(' How do you do ')}
	}
}

main.js

Introducing plug-ins ,use plug-in unit

// introduce Vue
import Vue from 'vue'
// introduce App
import App from './App.vue'
// Introducing plug-ins 
import plugins from './plugins'
// close Vue Production tips for 
Vue.config.productionTip = false

// application （ Use ） plug-in unit 
Vue.use(plugins,1,2,3)
// establish vm
new Vue({
	el:'#app',
	render: h => h(App)
})

stay school and student Used in components

Filters and methods from plug-ins

3、 ... and 、scoped style

effect ： Let the style take effect locally , To prevent conflict

How to write it ：<style scoped>

problem ：

 School Component's demo The style is sky blue ,student The same name of the component demo The style is orange

  If in App.vue First introduce school, For blue , To introduce student It's orange

After modifying the reference order , It's sky blue again

 

summary ： After the style has the same name , Later generations live in , Configure according to the latter . Look at the introduction sequence

vue First introduced , Then read the configuration item , Then it comes to interface templates （ Mainly introduce ）

solve

stay style After add scoped attribute , The principle is div After adding a special random value tag attribute  . Make the style have a specified action threshold

 

View version

npm view webpack versions
npm view less-loader versions

install 7 Version of less-loader

npm i [email protected]

You can also add lang, Appoint css perhaps less( Can be nested ). Don't write lang Default css, Yes lang Do not empty

<style lang="css" scoped>
.demo{
    background-color:skyblue;
}
</style>