Vue Extends 扩展选项

最新推荐文章于 2024-03-19 16:57:59 发布

Json____

最新推荐文章于 2024-03-19 16:57:59 发布

阅读量1.2k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Drug_/article/details/81136112

版权

前端专栏收录该内容

87 篇文章 0 订阅

订阅专栏

技术QQ交流群:294088839

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue Extends 扩展选项</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue Extends 扩展选项</h1>

<hr>
<div id="app">
    <p>
        {{num}}
    </p>
    <p><button @click="add">add</button></p>
</div>
</body>
</html>
<script>
    var extendObj={
      updated:function () {
          console.log('我是扩展的Update')
      },
      methods:{
          //如果方法名一样 他只触发构造器里的方法 扩展不触发  混入选项也一样
          add:function(){
              this.num++
              console.log('我是扩展出来的方法')
          }
      }
    };
    var app = new Vue({
        el:'#app',
        data:{
            num:1
        },
        updated:function(){
            console.log('我是构造器触发的')
        },
        methods:{
            add:function(){
                this.num++
                console.log('我是原生的方法')
            }
        },
        //扩展不能为数组 混入是为数组
       extends:extendObj

    })
</script>