Vue 插件和scoped样式(Day26)

22 阅读1分钟

插件

功能 :用于增强Vue

本质 :包含install方法的一个对象,install方法的参数:

  1. 第一个参数是Vue实例对象
  2. 第二个及之后的参数是插件使用者传递的参数

定义插件

  1. 在src文件夹下新建一个pulgins.js文件
  2. 在其中写入install方法和其他想实现的功能
export default {
    install(Vue,username) {
    	console.log(username)
        //    全局过滤器
        Vue.filter('mySlice', function (value) {
            return value.slice(0, 4)
        })
        //     全局指令
        Vue.directive('fbind', {
            bind(element, binding) {
                element.valur = binding.value;
            },
            inserted(element) {
                element.focus();
            },
            update(element, binding) {
                element.value = binding.value;
            }
        })
        //     混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            }
        })
        //     给Vue原型添加方法
        Vue.prototype.hello = () => {
            alert('Hello!')
        }
    }
}

使用插件

  1. 在main.js中对其进行引入和使用
// 使用插件
import plugins from '@/plugins'
Vue.use(plugins,'李四')

scoped样式

作用: 让样式在局部生效,防止页面间样式污染

写法: 在各子组件的style标签中配置scoped属性

//Student组件
<style scoped>
.student{
    background-color: tomato;
}
</style>