🚀
头像

默永


人生就像骑单车,想保持平衡就得往前走。

vue - mixin混入插件

2023-01-31 19:18:28 271 💗 0 @默永

mixin混入

功能:可以把多个组件共用的配置提取成一个混入对象

使用方式

创建一个js文件:

export hunhe = {
  showName(){
    alter(this.name)
  },
  data() {
    return {
      x:100,
      y:200,
    } 
  }
}

引入:

import {hunhe} from '../mixin'

export default {
  data() {
    name:'张三'
  },
  mixins:[hunhe]
}

// 在main.js全局引用
Vue.mixin(hunhe)

插件

功能:用于增强Vue

本质:包含install方法的一个对象,install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。

定义插件

// 创建一个文件
export default {
    install(Vue) {
        console.log(123)
        // 全局过滤器
        Vue.filter('mySlice', function(val) {
            return val.slice(0, 3)
        })
        // 定义混入
        Vue.mixin({
            data() {
                return {
                    x: 100,
                    y: 200
                }
            }
        })
        Vue.prototype.demo = ()=>{alter()}
    }
}
// main.js 引用 这样之后VC VM都可以访问到
import plugins from './plugins'
Vue.use(plugins)
new Vue({})

小知识

在设置样式的时候,多个标签重复,样式会乱所以可以在 <style> 标签添加scoped属性就可以防止样式错乱。lang属性可以设置css写法,可以使用less来写样式。

    目录导航