溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
我的 github 地址 - vue3.0Study - 階段學習成果都會建立分支。
==========================
定義一個基礎組件
這個基礎組件，是導航條中 可以復用 的基礎組件 單個導航。
基礎組件【導航組件】基礎的功能是能夠顯示文字，單擊的交互方式。明確任務目標之后，進行開發。
在 component 目錄下新建 Base 目錄，Base 下新建文件 TopNav.vue。加入如下代碼：
<template>
<div class="topnav">
{{title}}
</div>
</template>
<script>
export default {
name: 'topnav',
props: ['title'],
data: function () { return {
text: '導航條'
} }
}
</script>
在 About.vue 中加入以下紅色部分的代碼：
<template>
<div class="about">
<top-nav title="推薦"/>
<HelloWorld msg="vue 官方相關資料的鏈接"/>
</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。其實 HelloWorld 也是可以復用的。
所謂的復用是啥意思呢？如下：
<top-nav title="推薦"/>
<top-nav title="軍事"/>
<top-nav title="社會"/>
<top-nav title="科技"/>
這既是所謂的復用啦。 title 是 TopNav.vue 的 props 屬性中的內容。以上看出，props 是一個數組，里邊每個元素，是一個將要從父組件中傳遞過來的【變量】，對，變量，就是這么理解。
上篇文章提到過 全局注冊 和 局部注冊；這個例子，是 【局部注冊組件】。在把它變為【全局注冊組件】之前，先 git push 一下。
好的，在變【全局】之前，有個問題：全局 和 局部 有什么區別？
上面的例子看見了，要用 HelloWorld 或 TopNav，必須先 import。而全局的，不用 import。
把組件變為全局組件
任何模塊 ( 這時候把組件理解為模塊 ) 不可能不用 import 就可以用，全局注冊組件，只是在 main.js 中進行 import，然后通過 Vue.component( params ) 這個函數進行全局注冊。
所以全局注冊組件也并不神秘，在 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') 也就是根組件實例化之前定義。
然后去掉 About.vue 中 TopNav.vue 的引入：
<template><div class="about">
<top-nav title="推薦"/>
<top-nav title="軍事"/>
<top-nav title="社會"/>
<top-nav title="科技"/>
<HelloWorld msg="vue 官方相關資料的鏈接"/>
</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>
運行代碼，可以發現并未報錯。
這就是全局注冊。還是有個問題，大型項目基礎組件多起來，這 main.js 便不好看。下面介紹的方法可以只用數十行代碼，就可以解決。
首先引入兩個 lodash 模塊：
import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase'
通過以下代碼可以找到包含基礎模塊的所有文件：
const requireComponent = require.context( /* 在 ./components/Base 文件夾中尋找基礎模塊 */ './components/Base', /* 是否包含子文件夾 */ true, /* 只要是 .vue 結尾的文件都是基礎模塊 */ /[\w-]+\.vue$/ )
下一步便是遍歷進行模塊 import：
/* 對這個文件集合進行遍歷 - import - 全局注冊 */
requireComponent.keys().forEach(fileName => {
/* 獲取組件配置 */
const componentConfig = requireComponent(fileName)
/* 從文件名中得到組件名 */
const componentName = upperFirst(
camelCase(
fileName
/* 移除開頭的 "./_" */
.replace(/^\.\/_/, '')
/* 去掉文件的后綴名，也即 .vue */
.replace(/\.\w+$/, '')
)
)
/* 全局注冊組件 */
Vue.component(componentName, componentConfig.default || componentConfig)
})
這樣 './components/Base' 目錄下的 *.vue 組件會自動被引入并注冊為 全局組件。
==========================
組件的復用便介紹到這里，相關代碼也已經上傳至 GitHub.
總結
以上所述是小編給大家介紹的vue3.0 CLI - 2.6 - 組件的復用入門教程，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
