如何在Vue项目中使用Extends 扩展选项

如何在Vue项目中使用Extends 扩展选项？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Extends 扩展选项</title>
  <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>
<body>
<h2>Vue Extends 扩展选项</h2>
<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>

运行结果：

看完上述内容，你们掌握如何在Vue项目中使用Extends 扩展选项的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！

如何在Vue项目中使用Extends 扩展选项

相关推荐