在Vue中,當(dāng)我們想要在一個組件中使用另一個組件時,可以使用引入外部組件的方法。Vue提供了一個方便的方法幫助我們實現(xiàn)這一需求,接下來我們將詳細介紹該方法。
Vue.component('external-component', { template: '<div>I am an external component.</div>' })
代碼中的Vue.component()方法可以用來注冊一個Vue組件。該方法有兩個參數(shù),第一個是組件的名稱,第二個是一個對象,該對象有一個template屬性,用來定義這個組件的HTML模板。
像剛才那樣注冊完外部組件后,我們就可以在當(dāng)前組件中引用該外部組件了,示例代碼如下:
Vue.component('parent-component', { template: '<div><external-component></external-component></div>' })
在上面的代碼中,我們先注冊了一個名為parent-component的組件,該組件的HTML模板中包含了一個 <external-component>標(biāo)簽,這個標(biāo)簽對應(yīng)剛才注冊過的外部組件。
但是,如果我們想要在某個特定的組件中引入外部組件,那么我們需要添加如下代碼:
import ExternalComponent from './ExternalComponent.vue'; export default { name: 'App', components: { ExternalComponent } }
在上面的代碼中,我們首先使用ES6的import語法導(dǎo)入了一個名為ExternalComponent的外部組件,該組件的路徑為./ExternalComponent.vue。然后,在組件中的components屬性中添加了對該組件的引用。
當(dāng)我們需要在HTML模板中使用該組件時,只需在標(biāo)簽中添加組件名稱即可:
<template><div><ExternalComponent /></div></template>
在上面的代碼中,我們使用了Vue的單文件組件(.vue文件)形式來定義了一個叫做ExternalComponent的組件,然后在另一個組件中通過import導(dǎo)入,并通過components屬性添加了對該組件的引用。在HTML模板中使用該組件時,只需在標(biāo)簽中添加組件名稱即可。
總結(jié)來說,Vue引入外部組件的方法有兩種:一種是通過Vue.component()方法注冊組件,在當(dāng)前組件中引用外部組件;另一種是通過import語法導(dǎo)入外部組件,并在組件中的components屬性中添加外部組件的引用,在HTML模板中使用該組件時只需在標(biāo)簽中添加組件名稱即可。