目录
一、mixin混入
1.功能
可以把多个组件功用的配置提取成一个混入对象
2.使用方式
第一步:定义混合,例如:
{
data () { ... },
methods : { ... }
...
}
export const mixin = {
methods:{
showName(){
alert(this.name)
}
},
}
export const hunhe = {
mounted(){
console.log('你好啊!!!!');
}
}
第二步:使用混入,例如:
(1).全局混入:Vue.mixin ( xxx ) (在main.js文件中)
import {mixin,hunhe} from './mixin'
Vue.mixin(mixin)
Vue.mixin(hunhe)
(2).局部混入:mixins : [ 'xxx' ]
<script>
//引入一个混合
import {mixin,hunhe} from '../mixin'
export default {
mixins:[mixin,hunhe]
}
</script>
二、插件
1.功能
用于增强Vue
2.本质
插件是包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据
3.定义插件
对象.install = function (Vue,options){
//1.添加全局过滤器
Vue.filter(....)
//2.添加全局指令
Vue.directive(....)
//3.配置全局混入(合)
Vue.mixin(....)
//4.添加实例方法
Vue.prototype.$myMethods = function(){....}
Vue.prototype.$myProperty = xxxx
}
4.使用插件
Vue.use()
三、scoped样式
1.作用
让样式在局部生效,防止冲突
2.写法
<style scoped>
3.案例
如下,有效避免了两个组件的样式命名冲突