首页技术文章正文

Vue.extend的用法

更新时间:2022年03月29日11时53分来源:传智教育浏览次数:

　　Vue.extend用于基于Vue构造器创建一个Vue子类，可以对Vue构造器进行扩展。它有一个options参数，表示包含组件选项的对象。下面我们通过例3-3演示Vue.extend的使用。

　　【例3-3】

　　(1)创建C：Users/itcast/Desktop/demo03.html文件，具体代码如下：

<div id="app1">app1: {{title}}</div>
<div id="app2">app2: {{title}}</div>
<script>
var Vue2 = Vue.extend({
  data () {
    return { title: 'hello' }
  }
})
var vml = new Vue({ el: '#app1' })
var vm2 = new Vue2({ el: '#app2' })
</script>

　　在上述代码中，第4行的Vue.extend()方法返回的Vue2就是Vue的子类;第5～7行用于为新创建的Vue2实例添加data数据，由于此时Vue2实例还未创建，所以要把数据写在函数的返回值中;第1行的title在vml中不存在，代码在执行时会报错，如果报错，就说明第5～7行代码只对Vue2有效，原来的Vue不受影响。

　　(2)在浏览器中打开demo03.html文件，运行结果如图3-3所示。

Vue.extend