我的 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 /srcimport 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 /srcimport HelloWorld from '@/components/HelloWorld.vue'// import TopNav from '@/components/Base/TopNav.vue'export default { name: 'home', components: { HelloWorld }}</script>