Plugins and scoped styles in vue

1. Plug-ins

It can realize many powerful functions , such as: define filters, define custom instructions, define mix-ins, add methods to prototypes, etc., only need to define in the plug-in file and introduce the plug-in in main.js;

Function: used to enhance vue

Essence: An object containing the install method , install can receive multiple parameters , the first parameter is vue , and the second and later parameters are the parameters passed by the plug-in user ;

Define the plugin:

object.install = function(vue,option){ ... }

Use the plugin:

Vue.use()

plugins.js file

import Vue from "vue"

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

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

main.js file

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),
})

Two, scoped style

When two different subcomponents use the same class name , it is easy to overwrite when defining the style style ;

Principle : When different subcomponents are converted into html, css, and js files at the end, the styles defined in their style tags will be integrated into one css file . If different components use the same class name, it will cause coverage;

Solution : Set the scoped attribute for the style tag in each conflicting sub-component , and you can successfully narrow the style scope of each component to this component without affecting the styles of other components;

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