vue中的插件与scoped样式

一、插件

能够实现很多强大的功能，例如：定义过滤器、定义自定义指令、定义混入、给原型上添加方法等，只需要在插件文件中定义，并在main.js中引入插件；

功能：用于增强vue

本质：包含install方法的一个对象，install可以接收多个参数，第一个参数为vue，第二个以后的参数是插件使用者传递的参数；

定义插件：

对象.install = function(vue,option){ ... }

使用插件：

Vue.use()

plugins.js文件

import Vue from "vue"

export default {
    install(vue,a,b,c){
        // 插件的功能：定义过滤器、定义自定义指令、定义混入、给原型上添加方法等

        // 定义混入
        Vue.mixin({
            data(){
                return{
                    x:100,
                    y:200
                }
            }
        })
    }
}

main.js文件

import Vue from 'vue'
import App from './App'

// 引入插件
import plugins from './plugins'

// 使用插件plugins
Vue.use(plugins)

// 创建vue实例对象
new Vue({
  el:'#app',
  render: h => h(App),
})

二、scoped样式

当两个不同的子组件使用同一个类名时，定义style样式的时候容易产生覆盖；

原理：不同子组件在最后转化为html、css、js文件时，他们的style标签中定义的样式都会整合在一个css文件中，如果不同组件使用了同一个类名，就会造成覆盖；

解决方法：为每一个造成冲突的子组件中的style标签设置scoped属性，就能够成功将每一个组件的style作用域缩小到该组件，不会影响其他组件的样式；

<style scoped>
    .demo{
        background-color: yellow;
    }
</style>