本章節主要是給稍微了解vue,或是有寫過其他框架,會跑基本迴圈與判斷v-if , v-for等概念的人,可以進一步了解vue的特殊實用部分。主要會介紹

  1. Vue 3 CreateApp: 了解vue是如何產生並附著在html的基本概念
  2. Vue App註冊component
  3. Vue children: <slot>
  4. 特殊tag <keep-alive> <teleport>

Vue 3 CreateApp()

不可或缺的兩個檔案

  • public/index.html : vue在渲染html的入口檔案
  • src/main.js: 透過main.js 找到渲染的節點並渲染App

PS: 左邊是使用vue cli的預設結構,右邊是精簡化的檔案結構

Vue Cli 檔案結構

實作createApp

/node_modules
/public
index.html
/src
main.js 空的檔案
  1. 新增入口App

在src中新增App.vue

app.vue 建立資料

2. createApp

/src/App.vueimport { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
mountApp 後出現畫面

我們也可以把createApp與mount分開寫

/src/App.vueimport { createApp } from 'vue'import App from './App.vue'const app = createApp(App);app.mount('#app')

3. 加入 component

app.component(<模組名稱>) 可直接在App中加入模組

import { createApp } from 'vue'import App from './App.vue'import ActiveUser from './components/ActiveUser.vue'
const app = createApp(App);
app.component(ActiveUser);
// 也可使用 app.component('active-user', ActiveUser);app.mount('#app')
新增components

在App.vue裡面使用active-user

直接使用active-user

PS: 這邊也可以採取另一種做法,直接在App.vue import ,就不需要在main.js 中app.component了

然而,看到這邊你可能會有一個疑問。

那就是如果有100個模組是否就要在main.js裡面加入?

如果加了100個,所有頁面都能直接使用非常方便,但卻犧牲了效能。可能某些模組只被使用過一次,但其他不相干的頁面卻需要將這些模組初始化。

因此需要釐清global 與local 模組的概念

註冊在main.js中的global components

Global & Local component!

Local: 區域,表示只在特定檔案檔案才使用到該模組。

將global 改成local: 1. 引入=> 2. 註冊=> 3. 使用

components: {

UserInfo,
// UserInfo: UserInfo // "user-info": UserInfo, => 這種寫法在使用上只能用<user-info> 不能用大駝峰UserInfo (React寫法)
}
App.vue 使用模組

後續在main.js就可以把該模組拿掉了

main.js
scope限制CSS影響範圍

Slot

//React <ChildComponent>
{props.children}
</ChildComponent>
//Vue<ChildComponent>
<slots></slots>
</ChildComponent>

接著我們來看實際使用起來的程式碼

App.vue (加入slot前)

新增一個BaseCard.vue 的模組

BaseCard.vue模組 (注意slot的位置)

後續把slot引入並包在BaseCard裡面

App.vue
BaseCard.vue 對照

此時可以看到user-info被夾在BaseCard的slots裡面了。

Multiple Slots

// Parenetcomponent
<ChildComponent>
<template v-slot:{slot名稱}></template> {其他地方會進入default slot中 (可不寫(包)template)}</ChildComponent>// ChildComponent<template> <slot name="slot名稱"></slot> <slot></slot> // 預設的slot 可不給名稱</template>
App.vue
BaseCard.vue

$slots => 在mounted的時候可以查看接收到的slot


mounted(){
console.log(this.$slots.<slotname>);
}

Scope Slots

概念圖

// ChildCompo<template>    <ul>
<li v-for="goal in goals" : key="goal">
<slot :item="goal"></slot>
</li>
</ul>
</template><script>
export default{

}
</script>
// ParentCompo
<ChildCompo> <template #default="slotProps"> <h1> {{ slotProps.item }}</h1>
<p> {{ slotProps['another-prop'] }}</p>
</template></ChildCompo>

動態模組(Dynamic Components)

概念如下

App.vue
<button @click="setAliveCompo('a-component')">show a-compo</button>
<button @click="setAliveCompo('b-component')">show b-compo</button>
<a-component v-if="aliveComponent === 'a-component' "></a-component>
<b-component v-if="aliveComponent === 'b-component' "></b-component>
<script>
data(){ return{ aliveComponent: 'a-component';
};
}
methods:{ setAliveCompo(aliveCompo) { this.aliveComponent = aliveCompo
}
}
</script>

這種方式可以,不過太過冗長,Vue有提供Dynamic component 能夠支援切換不同的component

App.js
<a-component v-if="aliveComponent === 'a-component' "></a-component><b-component v-if="aliveComponent === 'b-component' "></b-component>----------------------- 上面這兩行修改成如下 ------------------------<component :is="aliveComponent"></component>

然而實際操作時,會發現component在切換時,會把原本的component 移除,因此如果不想要移除,可以再多加一<keep-alive>的tag。如此一來就不會被移除了。

<keep-alive>   <component :is="aliveComponent"></component></keep-alive>

將模組插入特定dom元素 <teleport to=”${dom}”>

但在vue app.vue的架構中,都一定會被包在<div id=”app”></div>裡面。而vue可以簡單幫我們達成這個需求。

<teleport to="body">   <modal-compo v-if="showModal"></modal-compo>  </teleport>

此時當modal-compo出現時就會被塞到<body> 中。

當然我們也可以讓to=”#app” 或是其他css的class中。有點類似jquery selector的方式。

以上就先介紹到這邊,基本上有了上述概念,在開發vue上會顯得更得心應手。之後的章節會再進一步介紹其他常用部分。

Web Develop X Investor X Traveller 經濟系畢業。誤打誤撞開始從事網頁開發,熱愛分享學習知識及生活啟發。 關於我:https://chun-wei.com 聯絡信箱:jinwei@chun-wei.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store