Vue (11) — mixin混入、插件、scoped样式
作者：互联网
目录
一、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.案例
如下，有效避免了两个组件的样式命名冲突
标签：11,插件,Vue,....,混入,mixin,hunhe 来源： https://blog.csdn.net/m0_59897687/article/details/121924043