Vue中mixin的使用和插件的使用

2023-12-28 10:49:13
  • mixin(混入)

  • 当多个组件的方法、数据相同时。可以统一调用mixin。mixin用于保存组件们共同拥有的方法和数据。

  • 第一个组件和第二个组件有相同的method。用mixin.js进行封装

  • //------------------------第一个组件------------------------------
    <template>
     ?<div>
     ? ?<h2 @click="showName">姓名:{{ name }}</h2>
     ? ?<h2>地址:{{ address }}</h2>
     ?</div>
    </template>
    <script>
    import { mixin } from './mixin';
    export default {
     ?name: 'useSelect',
     ?data() {
     ? ?return {
     ? ? ?name: '猴哥',
     ? ? ?address: '花果山'
     ?  }
      },
     ?mixins:[mixin]
    }
    </script>

  • 当第二个组件和mixin.js文件都设置了x,y属性。先调用组件的x,y。如果组件没有设置x,y属性,则调用mixin.js文件中的x,y

  • mounted()生命周期钩子,如果组件和mixin.js文件都设置mounted。两个的mounted都调用。不存在谁先谁后

  • //--------------------------第二个组件--------------------------------
    <template>
     ?<div>
     ? ?<h2 @click="showName">学生姓名:{{ name }}</h2>
     ? ?<h2>学生性别:{{ sex }}</h2>
     ? ?<h2>{{ x }}{{ y }}</h2>
     ?</div>
    </template>
    ?
    <script>
    // 导入mixin.js文件
    import { mixin,minxin2 } from './mixin';
    export default {
     ? ?data(){
     ? ? ? ?return {
     ? ? ? ? ?name:'张三',
     ? ? ? ? ?sex: '男',
     ? ? ? ? ?// 如果这里也有x,y那么用这里的x,y。没有则用mixin2中的x,y但生命周期钩子。不以谁为主,两边都写则都使用
     ? ? ? ? ?x: '3',
     ? ? ? ? ?y: '4'
     ? ? ?  }
     ?  },
     ? ?// 像props那样接收
     ? ?mixins:[mixin,minxin2]
    }
    </script>

  • 将mixin.js文件进行暴露

  • export const mixin = {
     ? ?methods: {
     ? ? ? ?showName() {
     ? ? ? ? ? ?console.log(this.name);
     ? ? ?  }
     ?  }
    }
    export const minxin2 = {
     ? ?data(){
     ? ? ? ?return {
     ? ? ? ? ? ?x:100,
     ? ? ? ? ? ?y:300
     ? ? ?  }
     ?  }
    }
    /* 当导出的方法只有一个时用默认导出
     const mixin = {
     ? ? methods: {
     ? ? ? ? showName() {
     ? ? ? ? ? ? console.log(this.name);
     ? ? ? ? }
     ? ? }
     }
     export default minxin */
  • 全局配置mixin

  • 需要在vm中导入mixin.js

  • import Vue from 'vue'
    import App from './App'
    import {mixin,mixin2} from './components/mixin'
    Vue.mixin(mixin)
    Vue.mixin(mixin2)
    ?
    new Vue({
     ?el: '#app',
     ?router,
     render: h => h(App)
    })
     

插件

  • 插件的作用是为组件加buff

  • 下面定义了一个plugins.js的文件作为插件

  • export default {
     ? ?// install(){}为成功设置插件
     ? ?install(){
     ? ? ? ?// 全局过滤器
     ? ? ? ?Vue.filter('upDatetime', function (value) {
     ? ? ? ? ? ?return value.slice(0, 4);
     ? ? ?  })
     ? ? ? ?// 全局v-fbind的自定义指令
     ? ? ? ?Vue.directive('fbing', {
     ? ? ? ? ? ?bing(element, bangding) {
     ? ? ? ? ? ? ? ?element.value = bangding.value
     ? ? ? ? ?  },
     ? ? ? ? ? ?inserted(element, bangding) {
     ? ? ? ? ? ? ? ?element.focus()
     ? ? ? ? ?  },
     ? ? ? ? ? ?update(element, bangding) {
     ? ? ? ? ? ? ? ?element.value = bangding.value
     ? ? ? ? ?  },
     ? ? ?  })
     ? ? ? ?//给Vue原型上添加一个方法(vm和vc就能用了)
     ? ? ? ?Vue.prototype.hello = () => {alert('我时hello方法')}
     ?  }
    }
  • 在main.js中引入plugins.js插件

  • import Vue from 'vue'
    import App from './App'
    import plugins from './components/plugins'
    ?
    // 使用use来使用插件
    Vue.use(plugins)
    new Vue({
     ?el: '#app',
     ?render: h => h(App)
    })
    ?
  • 在School组件中使用插件提供的功能

  • <template>
     ?<div>
     ? <h2>学校的名字:{{ name | upDatetime }}</h2>
     ? <button @click="test">点位测试以下hello方法</button>
     ?</div>
    </template>
    ?
    <script>
    export default {
     ? ?data(){
     ? ? ? ?return {
     ? ? ? ? name: '小猴子的玩具商'
     ? ? ?  }
     ?  },
     ? ?methods:{
     ? ? ?test(){
     ? ? ? ?this.hello()
     ? ?  }
     ?  }
    }
    </script>

文章来源:https://blog.csdn.net/Yyds12300/article/details/135236024
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。