混入、插件、scoped
混入
1.功能:可以把多个组件共用的配置提取成一个混入对象
2.使用方式:
第一步定义混合:
```
{
data(){....},
methods:{....}
....
}
```
第二步使用混入:
全局混入:```Vue.mixin(xxx)```
局部混入:```mixins:['xxx'] ```(局部混入与methods、data等同级)
插件
-
功能:用于增强Vue
-
本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。
-
定义插件:
对象.install = function (Vue, options) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx }
-
使用插件:
Vue.use()
scoped
在组件中编写style容易发生重名的现象,因为一个项目中包含大量.vue文件。为了避免这个问题,引入scoped。
- 作用:让样式在局部生效,防止冲突。
- 写法:
<style scoped>