Vue中extend組件的用法

Vue.extend的用法

一、 extend創建的是一個組件構造器，而不是一個具體的組件實例

    所以他不能直接在new Vue中這樣使用： new Vue({components: first})

   最終還是要通過Vue.components註冊纔可以使用的。

      創建一個div容器放置組件

創建一個子組件

創建一個父組件

 

局部註冊以及全局註冊的示例寫法

 

結果爲：

 

二、在實例化extends組件構造器時，傳入屬性必須是propsData、而不是props。另外，無論是Vue.extend還是Vue.component 裏面的data定義都必須是函數返回對象，如 Vue.extend({data: function () {return {}}})。除了new Vue可以直接對data設置對象之外吧，如 new Vue({data: {}});