[JavaScript知识库]Vue (八) --------- 混入、插件与 scope 样式

一、混入

mixins（混入），官方的描述是一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods 、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用 mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

举例：定义 mixins.js 其中放混合数据

export const mix1 = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊！')
	},
}

export const mix2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

Student.vue 中 定义

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

<script>
	 import {mix1, mix2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		mixins:[mix1, mix2]
	}
</script>

或者在 main.js 进行混入

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {mix1, mix2} from '../mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(mix1)
Vue.mixin(mix2)


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

二、插件

插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：

• 添加全局方法或者属性，如: vue-custom-element
• 添加全局资源：指令/过滤器/过渡等，如 vue-touch
• 通过全局 mixin 方法添加一些组件选项，如: vue-router
• 添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。
• 一个库，提供自己的 API，同时提供上面提到的一个或多个功能，如 vue-router

Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象。

关于 Vue install 方法，vue 提供 install 可供我们开发新的插件及全局注册组件等，install 方法第一个参数是 vue 的构造器，第二个参数是可选的选项对象。

export default {
	install(Vue,option){
		组件
		指令
		混入
		挂载vue原型
	}
}

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)
})

在插件中定义的过滤器、组件、指令等，在.vue文件中直接使用即可

<template>
	<div>
		<h2>学生姓名：{{name}}</h2>
		<h2>学生性别：{{sex}}</h2>
		<input type="text" v-fbind:value="name">
	</div>
</template>

<script>
	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
	}
</script>

三、scope 样式

在 vue 项目中通常会给 style 标签加上 scope 属性，以此来实现样式的私有化，避免全局污染。

scope 实现私有化样式的原理

通过给 DOM 元素结构上以及 css 样式上添加一个不重复的标记，来保证其唯一性，以此达到样式的私有化。

用法：

当使用第三方插件 ElementUI 的 button、dialog组件，并在style标签上加 scoped的属性即可。

<style scoped>
	.demo{
		background-color: skyblue;
	}
</style>