Vue Mixins混入选项的操作

最新推荐文章于 2024-05-06 18:46:17 发布

每一天，每一步

最新推荐文章于 2024-05-06 18:46:17 发布

阅读量57

点赞数

分类专栏： Vue 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/u010234868/article/details/120420234

版权

Vue 专栏收录该内容

118 篇文章 2 订阅

订阅专栏

用途：

1. 已经写好了构造器后，需增加方法，减少源代码的污染；
2. 公用方法，减少代码量，实现代码重用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ num }}
    <button @click="add">按钮</button>
  </div>

  <script src="node_modules/vue/dist/vue.js"></script>
  <script>
    // 全局混入 优先级最高
    Vue.mixin({
      updated () {
        console.log('我是全局混入');
      }
    });
    //额外临时加入时，用于显示日志
    var addLog = {
      updated () {
        console.log('数据放生变化，变化成' + this.num + '');
      }
    };
    new Vue({
      el: '#app',
      data(){
        return {
          num: 0
        }
      },
      methods: {
        add(){
          this.num++;
        }
      },
      // 构造器里的再执行
      updated: function () {
        console.log('构造器里的updated方法');
      },
      // 混入对象的钩子将在组件自身钩子之前调用
      mixins: [addLog]
    });
  </script>
</body>
</html>

每一天，每一步

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue Mixins混入选项的操作

用途：1. 已经写好了构造器后，需增加方法，减少源代码的污染；2. 公用方法，减少代码量，实现代码重用。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
复制链接

扫一扫