目录

• 一、混入
• 二、插件
• 三、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 = falseVue.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>

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！