mixin\插件\scoped样式

一.mixin

也叫混入

功能：可以把多个组件共用的配置提取成一个混入对象

使用方法：

第一步定义混合，例如：

{

data(){...}

methods:{}

......

}

第二步使用混入，例如

1.全局混入：Vue.mixin(xxx)

2.局部混入：mixins:['xxx']

MyStudent.vue

<template>
  <div>
   
      <h2 @click = "showName">学生姓名:{{name}}</h2>
      <h2>学生性别:{{sex}}</h2>
  </div>
</template>

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

MySchool.vue

<template>
  <div>
     
      <h2 @click = "showName">学校名称:{{name}}</h2>
      <h2>学校地址:{{address}}</h2>
  </div>
</template>

<script>
import {hunhe} from '../mixin'
export default {
    name:"MySchool",
    data(){
        console.log(this)
        return {
            name:'尚硅谷',
            address:'北京',
            x:666
        }
    },
    
   mixins:[hunhe],
   mounted(){
       console.log("你好啊!!!!!!")
   }
    
}
</script>

mixin.js

export const hunhe= {
    data() {
		return {
			x:100,
			y:200
		}
	},
    methods: {
		showName(){
            alert(this.name)
        }
    },
    mounted() {
		console.log('你好啊！')
	},
}
// 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中导入学生和学校组件即可

（1）data数据混入，如果原先没有，混合有，附加数据。如果原先有该变量，混合也有变量，以原先组件中的data变量为主

（2）生命周期mounted中，如果混合和原组件共用函数，两个都要，且原先组件的函数先执行。混合后执行

二.插件

|-- 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)
		//全局过滤器
		Vue.filter('mySlice',function(value){
			return value.slice(0,4)
		})

		//定义全局指令
		Vue.directive('fbind',{
			//指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			//指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			//指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		})

		//定义混入
		Vue.mixin({
			data() {
				return {
					x:100,
					y:200
				}
			},
		})

		//给Vue原型上添加一个方法（vm和vc就都能用了）
		Vue.prototype.hello = ()=>{alert('你好啊')}
	}
}

main.js

引入插件，use插件

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入插件
import plugins from './plugins'
//关闭Vue的生产提示
Vue.config.productionTip = false

//应用（使用）插件
Vue.use(plugins,1,2,3)
//创建vm
new Vue({
	el:'#app',
	render: h => h(App)
})

在school和student组件中使用

来自插件的过滤器和方法

三、scoped样式

作用：让样式在局部生效，防止冲突

写法：<style scoped>

问题：

 School组件的demo样式是天蓝色，student组件的同名demo样式是橘色

 如果在App.vue中先引入school，为蓝色，再引入student为橘色

修改引用顺序后，又都是天蓝色

 

总结：这里发生样式重名后，后来者居上，按后者配置来。看引入顺序

vue先引入，再读取配置项，再涉及界面模板（主要是引入）

解决

在style后加scoped属性，原理是在div后添加了特殊的随机值的标签属性 。使样式有指定的作用阈

 

查看版本

npm view webpack versions
npm view less-loader versions

安装7版本的less-loader

npm i less-loader@7

还可以加lang,指定css或者less(可以嵌套)。不写lang默认css,写了lang不可为空

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