註冊一個組件到現有的Vue.js實例

Question

我是Vue.js的新手。

我想註冊一個本地組件作爲在這裏描述：

https://vuejs.org/v2/guide/components.html#Local-Registration

唯一的問題是，我需要註冊一個組件現有 Vue的情況下沒有在創建新實例的東西像：

const app = new Vue({ 
    el: '#app' 
}); 

app.component({ 
    'my-component': { 
     template: '<div>A custom component!</div>' 
    } 
}); 

我已經嘗試Vue.extend的，但它不工作。

編輯：

爲什麼我需要這樣的：

我創建一個第三方包，其中將有分量。將要安裝該軟件包的框架將包含Vue.js和Vue實例。因此，如果我在框架的JS之前包含我的包的JS，那麼它會給我Vue是未定義的，如果在框架的JS之後包含我的包的JS，那麼它會給我組件錯誤，因爲它必須在Vue實例化之前註冊。

Answer 1

您不能將組件添加到類似的實例。所有你能做到將它們添加到Vue的構造像往常一樣：

const app = new Vue({ 
    el: '#app' 
}); 

Vue.component({ 
    'my-component': { 
     template: '<div>A custom component!</div>' 
    } 
}); 

在這裏看到一個演示：https://jsfiddle.net/Linusborg/kb9pbecq/

Answer 2

const app = new Vue({ 
    el: '#app', 
    components: { 
    'my-component': {template: '<div>Text in component</div>'} 
    } 
}); 

Answer 3

基本上，你不能註冊組件到現有的Vue公司的實例，而這是已經呈現。但是你可以在Vue實例掛載到dom元素之前註冊一個組件。

// local component 
var child = { 
    template: '<div>A custom component!</div>' 
} 

const app = new Vue({ 
    el: '#app', 
    components: { 
    Child: child 
    } 
}) 

或

// global component 
Vue.component({ 
'child': { 
    template: '<div>A custom component!</div>' 
} }) 

定義部件，然後再執行它。