Vue.extend的用法

　　Vue.extend用于基于Vue構(gòu)造器創(chuàng)建一個(gè)Vue子類，可以對Vue構(gòu)造器進(jìn)行擴(kuò)展。它有一個(gè)options參數(shù)，表示包含組件選項(xiàng)的對象。下面我們通過例3-3演示Vue.extend的使用。

　　【例3-3】

　　(1)創(chuàng)建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行用于為新創(chuàng)建的Vue2實(shí)例添加data數(shù)據(jù)，由于此時(shí)Vue2實(shí)例還未創(chuàng)建，所以要把數(shù)據(jù)寫在函數(shù)的返回值中;第1行的title在vml中不存在，代碼在執(zhí)行時(shí)會報(bào)錯(cuò)，如果報(bào)錯(cuò)，就說明第5～7行代碼只對Vue2有效，原來的Vue不受影響。

　　(2)在瀏覽器中打開demo03.html文件，運(yùn)行結(jié)果如圖3-3所示。

　　圖3-3 Vue.extend

　　在圖3-3所示的頁面中，appl對應(yīng)Vue的實(shí)例vml，app2對應(yīng)Vue2的實(shí)例vm2，從運(yùn)行結(jié)果可以看出，在vm2中添加了初始數(shù)據(jù)hello，vml不受影響。并且在控制臺中會看到title屬性未定義的提示。