Vue.js Mixins 混入使用

dcloud_jibinbin

于 2020-09-14 21:47:41 发布

阅读量388

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_45665589/article/details/108588776

Vue学习专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨Vue中混入（Mixins）的使用方法及其应用场景，包括如何通过混入减少源代码污染，实现代码重用，以及混入的执行顺序。通过实例展示了混入在Vue项目中的具体应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本用法

<!DOCTYPE html>
<!-- 
Mixins一般有两种用途：

1、在你已经写好了构造器后，需要增加方法或者临时的活动时使用的方法，这时用混入会减少源代码的污染。

2、很多地方都会用到的公用方法，用混入的方法可以减少代码量，实现代码重用。
 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>混入</title>
    <script src = "http://unpkg.com/vue"></script>
</head>
<body>
    <div id= "app">
        <p>num:{{num}}</p>
        <button @click = "add">点击我</button>
    </div>

    <script>
         var addLog = {
             updated:function(){
                 console.log("现在的数据为："+this.num);
             }
         }

         new Vue({
             el:'#app',
             mixins:[addLog],
             data:{
                 num:1
             },
             methods:{
                 add:function(){
                     this.num++;
                 }
             },
             updated:function(){
                 console.log("这里是构造器里的updated方法");
             }
         })
    </script>
</body>
</html>