Vue学习之--------Vue中自定义插件（2022/8/1）

Vue学习之--------Vue中自定义插件（2022/8/1）

文章目录

​​1、插件的基本介绍​​​​2、实际应用​​

​​2.1 目录结构​​​​2.2 代码实例​​

​​2.2.1 学校组件（School.vue）​​​​2.2.2 学生组件（Student.vue）​​​​2.2.3 定义的插件​​​​2.2.4 App.vue （汇总定义的组件）​​​​2.2.5 main.js中引入组件​​

​​3、测试效果​​​​4、什么是mixin(混入)​​

1、插件的基本介绍

1、功能：用于增强Vue2、本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。3、定义插件：

对象.install = function (Vue,) { // 1. 添加全局过滤器 Vue.filter(....) // 2. 添加全局指令 Vue.directive(....) // 3. 配置全局混入(合) Vue.mixin(....) // 4. 添加实例方法 Vue.prototype.$myMethod = function () {...} Vue.prototype.$myProperty = xxxx}

4、在main.js中 使用插件：​​Vue.use()​​

2、实际应用

2.1 目录结构

2.2 代码实例

2.2.1 学校组件（School.vue）

2.2.2 学生组件（Student.vue）

2.2.3 定义的插件

const plugin = { install(Vue) { //定义全局过滤器 Vue.filter('mySlice', function (value) { return value.slice(0, 5) }) //定义全局指令 Vue.directive('fbind', { //指令与元素成功绑定时（一上来） bind(element, binding) { element.value = binding.value }, //指令所在元素被插入页面时 inserted(element, binding) { element.focus() }, //指令所在的模板被重新解析时 update(element, binding) { element.value = binding.value } }) //定义混入 Vue.mixin({ data() { return { x: 100, y: 200 } }, }) }}export default plugin

2.2.4 App.vue （汇总定义的组件）

2.2.5 main.js中引入组件

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import App from './App'import router from './router'import plugin from './plugins'Vue.use(plugin)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})

3、测试效果

4、什么是mixin(混入)

1、功能：可以把多个组件共用的配置提取成一个混入对象(便于维护、共用部分抽取出来、同时提高代码复用)2、使用方式：第一步定义混合：

{ data(){....}, methods:{....} ....}

第二步使用混入：

​ 全局混入：​​Vue.mixin(xxx)​​​ ​ 局部混入：​​mixins:['xxx'] ​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。