更新時間:2022年03月29日11時53分 來源:傳智教育 瀏覽次數(shù):
Vue.extend用于基于Vue構(gòu)造器創(chuàng)建一個Vue子類,可以對Vue構(gòu)造器進(jìn)行擴(kuò)展。它有一個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ù),由于此時Vue2實(shí)例還未創(chuàng)建,所以要把數(shù)據(jù)寫在函數(shù)的返回值中;第1行的title在vml中不存在,代碼在執(zhí)行時會報錯,如果報錯,就說明第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屬性未定義的提示。
北京校區(qū)