vue3.0 CLI - 2.6 - 組件的復(fù)用入門教程

我的 github 地址 - vue3.0Study - 階段學(xué)習(xí)成果都會(huì)建立分支。

==========================

定義一個(gè)基礎(chǔ)組件

這個(gè)基礎(chǔ)組件，是導(dǎo)航條中 可以復(fù)用 的基礎(chǔ)組件 單個(gè)導(dǎo)航。

基礎(chǔ)組件【導(dǎo)航組件】基礎(chǔ)的功能是能夠顯示文字，單擊的交互方式。明確任務(wù)目標(biāo)之后，進(jìn)行開發(fā)。

在 component 目錄下新建 Base 目錄，Base 下新建文件 TopNav.vue。加入如下代碼：

<template>
 <div class="topnav">
  {{title}}
 </div>
</template>
<script>
export default {
 name: 'topnav',
 props: ['title'],
 data: function () { return {
  text: '導(dǎo)航條'
 } }
}
</script>

在 About.vue 中加入以下紅色部分的代碼：

<template>
 <div class="about">
 <top-nav title="推薦"/>
 <HelloWorld msg="vue 官方相關(guān)資料的鏈接"/>
 </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import TopNav from '@/components/Base/TopNav.vue'
export default {
 name: 'home',
 components: {
 HelloWorld, TopNav
 }
}
</script>

通過以上兩步，就在 About.vue 中引入新組件 TopNav。其實(shí) HelloWorld 也是可以復(fù)用的。

所謂的復(fù)用是啥意思呢？如下：

<top-nav title="推薦"/>
<top-nav title="軍事"/>
<top-nav title="社會(huì)"/>
<top-nav title="科技"/>

這既是所謂的復(fù)用啦。 title 是 TopNav.vue 的 props 屬性中的內(nèi)容。以上看出，props 是一個(gè)數(shù)組，里邊每個(gè)元素，是一個(gè)將要從父組件中傳遞過來的【變量】，對(duì)，變量，就是這么理解。

上篇文章提到過 全局注冊(cè) 和 局部注冊(cè)；這個(gè)例子，是 【局部注冊(cè)組件】。在把它變?yōu)椤救肿?cè)組件】之前，先 git push 一下。

好的，在變【全局】之前，有個(gè)問題：全局 和 局部 有什么區(qū)別？

上面的例子看見了，要用 HelloWorld 或 TopNav，必須先 import。而全局的，不用 import。

把組件變?yōu)槿纸M件

任何模塊 ( 這時(shí)候把組件理解為模塊 ) 不可能不用 import 就可以用，全局注冊(cè)組件，只是在 main.js 中進(jìn)行 import，然后通過 Vue.component( params ) 這個(gè)函數(shù)進(jìn)行全局注冊(cè)。

所以全局注冊(cè)組件也并不神秘，在 main.js 加入如下代碼：

import TopNav from '@components/Base/TopNav'
Vue.component('TopNav', TopNav)

注意：Vue.component('TopNav', TopNav) 必須在  new Vue({ router, store, render: h => h(App) }).$mount('#app') 也就是根組件實(shí)例化之前定義。

然后去掉 About.vue 中 TopNav.vue 的引入：

<template><div class="about">
 <top-nav title="推薦"/>
 <top-nav title="軍事"/>
 <top-nav title="社會(huì)"/>
 <top-nav title="科技"/>
 <HelloWorld msg="vue 官方相關(guān)資料的鏈接"/>
</div></template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
// import TopNav from '@/components/Base/TopNav.vue'
export default {
 name: 'home',
 components: {
 HelloWorld
 }
}
</script>

運(yùn)行代碼，可以發(fā)現(xiàn)并未報(bào)錯(cuò)。

這就是全局注冊(cè)。還是有個(gè)問題，大型項(xiàng)目基礎(chǔ)組件多起來，這 main.js 便不好看。下面介紹的方法可以只用數(shù)十行代碼，就可以解決。

首先引入兩個(gè) lodash 模塊：

import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase'

通過以下代碼可以找到包含基礎(chǔ)模塊的所有文件：

const requireComponent = require.context(
 /* 在 ./components/Base 文件夾中尋找基礎(chǔ)模塊 */
 './components/Base',
 /* 是否包含子文件夾 */
 true,
 /* 只要是 .vue 結(jié)尾的文件都是基礎(chǔ)模塊 */
 /[\w-]+\.vue$/
)

下一步便是遍歷進(jìn)行模塊 import：

/* 對(duì)這個(gè)文件集合進(jìn)行遍歷 - import - 全局注冊(cè) */
requireComponent.keys().forEach(fileName => {
 /* 獲取組件配置 */
 const componentConfig = requireComponent(fileName)
 /* 從文件名中得到組件名 */
 const componentName = upperFirst(
 camelCase(
  fileName
  /* 移除開頭的 "./_" */
  .replace(/^\.\/_/, '')
  /* 去掉文件的后綴名，也即 .vue */
  .replace(/\.\w+$/, '')
 )
 )
 /* 全局注冊(cè)組件 */
 Vue.component(componentName, componentConfig.default || componentConfig)
})

這樣 './components/Base' 目錄下的 *.vue 組件會(huì)自動(dòng)被引入并注冊(cè)為 全局組件。

==========================

組件的復(fù)用便介紹到這里，相關(guān)代碼也已經(jīng)上傳至 GitHub.

總結(jié)

以上所述是小編給大家介紹的vue3.0 CLI - 2.6 - 組件的復(fù)用入門教程，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！