vue - mixin混入插件

默永

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

vue - mixin混入插件

2023-01-31 19:18:28 195 💗 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来写样式。

目录导航

打开“扫一扫”，打开网页后点击屏幕右上角分享按钮
或点击复制连接

2023-01-31 19:18:28 0个人觉得很赞

发表评论

评论列表

博主

删除

点击加载更多

快来参与评论

公告

昵称：默永

园龄：2年171天

注册时间：2021-11-15

当前在第：1页

总共：1条

搜索

精品文章 48小时阅读排行

优秀文章 7天获赞排行