zoukankan      html  css  js  c++  java
  • Vue之混入(mixin)与全局混入

    Vue之混入(mixin)与全局混入

    接下来通过一个简单的例子看看混入的基础用法:

    首先新建一个mixin.js文件,添加以下代码。

    let mixin = {
      data() {
        return {
          msg: 'hello mixin'
        }
      },
      created() {
        console.log('混入的钩子函数');
      },
      methods: {
        show() {
          console.log(this.msg);
        }
      }
    }
    export default mixin;

    然后新建一个index.vue文件,添加以下代码。

    <template>
      <div id="myVue">
        <span @click="show">{{msg}}</span>
      </div>
    </template>
    <script>
      import myMixin from './mixin.js';
      export default {
        name: 'myVue',
        mixins: [myMixin],
        created() {
          console.log('组件自身的钩子函数');
        }
      }
    </script>

    注意:在index.vue文件中要先引入mixin.js文件,然后就可以直接使用mixin.js中定义的数据msg和方法show。

    而对于混入对象以及组件自身的created钩子函数呢,它们都将被调用。但混入对象的钩子会在组件自身的钩子之前调用。

    如果组件自身定义了与钩子对象中同名的数据或方法,为了避免冲突,vue将优先使用组件自身的数据或方法。

    当然也可以将混入对象全局注册,在之后新建的所有vue组件中就都可以使用。

    接下来分享一下全局混入的注册方法。

    方法一:在工程的main.js中直接注册,实现如下:

    import Vue from 'vue';
    import App from './App';
    
    Vue.mixin({
      created() {
        console.log('全局混入的钩子函数');
      }
    });
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    });

    方法二:模块化注册,新建mixin.js文件并添加以下代码:

    export default {
      install(Vue) {
        Vue.mixin({
          created() {
            console.log('全局混入的钩子函数');
          }
        })
      }
    }

    然后在main.js中引入该文件并使用use方法进行注册

    import Vue from 'vue';
    import App from './App';
    import myMixin from './mixin.js';
    
    Vue.use(myMixin);
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      components: { App },
      template: '<App/>'
    });
  • 相关阅读:
    JavaScript控制改变鼠标的形状
    web控件开发系列(四) 自定义控件属性(上)
    web控件开发系列() 基础介绍
    Web前端面试题 Js把URL中的参数解析为一个对象
    节点的操作 创建、添加、移除、移动、复制
    一个sohoto广告弹出页提取时间的Js修改过程
    FireFox支持innerText的方法
    Js 基于html5localStorage方法 制作的 "我的便签本"
    原生JavaScript对CSS进行格式化和压缩
    JavaScript 命名规则 变量命名规则
  • 原文地址:https://www.cnblogs.com/wangyihong/p/11540092.html
Copyright © 2011-2022 走看看