**

組件進階 - 動態組件

**

**

組件進階-props校驗

**
props校驗
普通格式： props: [“propA”, “propB”]。沒有類型檢查
高階格式：

props: { // 基礎的類型檢查 (`null` 和 `undefined` 會通過任何類型驗證) propA: Number, // 多個可能的類型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 帶有默認值的數字 propD: { type: Number, default: 100 }, // 帶有默認值的對象 propE: { type: Object, // 對象或數組默認值必須從一個工廠函數獲取 default: function () { return { message: 'hello' } } }, // 自定義驗證函數 propF: { validator: function (value) { // 這個值必須匹配下列字符串中的一個 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } }

默認返回一個工廠函數,每次調用都會返回一個新的 數組結果

需求: 完成一個注冊功能頁面, 2個按鈕切換, 額外封裝兩個組件：一個填寫注冊信息, 一個填寫用戶簡介信息

目標: 多個組件使用同一個掛載點，并可以動態切換，這就是動態組件

根組件 ├── App.vue └── components├── UserName.vue # 用戶名和密碼輸入框└── UserInfo.vue # 人生格言和自我介紹框 <component :is="comName"></component>

在父組件App.vue中使用

<template><div><button @click="comName = 'UserName'">賬號密碼填寫</button><button @click="comName = 'UserInfo'">個人信息填寫</button><p>下面顯示注冊組件:</p><div style="border: 1px solid red"><!-- vue內置的組件component, 可以動態顯示組件 --><component :is="comName"></component></div></div> </template><script> import UserName from "./UserName"; import UserInfo from "./UserInfo"; export default {data() {return {comName: "UserName",};},components: {UserName,UserInfo,}, }; </script>

注意

● is只能是動態屬性=》:is=“組件注冊后的標簽名字符串或data變量”
● 不能直接拿注冊標簽名賦值使用

小結
vue內置component組件, 配合is屬性, 設置要顯示的組件標簽名字

**

組件進階-keep-alive組件

**
掌握組件緩存的使用

背景

組件切換會導致組件被頻繁銷毀和重新創建, 性能不高

使用Vue內置的keep-alive組件, 可以讓包裹的組件保存在內存中不被銷毀

演示1: 可以先給UserName.vue和UserInfo.vue 注冊created和destroyed生命周期事件, 觀察創建和銷毀過程

演示2: 使用keep-alive內置的vue組件, 讓動態組件緩存而不是銷毀

補充生命周期:

● activated - 激活 缺點: 消耗內存空間
● deactivated - 失去激活狀態

<keep-alive><!-- vue內置的組件component, 可以動態顯示組件 --><component :is="comName"></component> </keep-alive>

小結
keep-alive可以提高組件的性能, 內部包裹的標簽不會被銷毀和重新創建, 觸發激活和非激活的生命周期方法

**

組件進階-keep-alive組件-指定緩存

**

目標
掌握keep-alive的include屬性的用法
語法

1. include="組件名1,組件名2..." 2. :include="['組件名1'， '組件名2']" <keep-alive include="name1,name2"><!-- vue內置的組件component, 可以動態顯示組件 --><component :is="comName"></component> </keep-alive>

注意：

匹配首先檢查組件自身的 name 選項，如果 name 選項不可用，則匹配它的局部注冊名稱 (父組件 components 選項的鍵值)

**

組件進階-具名插槽

**

目標
掌握具名插槽的使用
背景
當一個組件內有2處以上需要外部傳入標簽的地方
格式

定義： <slot name="xxx">

使用：

● <template #xxx></template>; ● <template v-slot:xxx></template>

傳入的標簽可以分別派發給不同的slot位置

v-slot一般跟template標簽使用 (template是html5新出標簽內容模板元素, 不會渲染到頁面上, 一般被vue解析為內部標簽)

小結
3. slot有可以設置多個
4. 定義組件時：slot的name屬性起插槽名
5. 使用組件時, template配合#插槽名傳入具體html標簽或組件

**

案例:

**
插槽的案例-升級折疊面板

需求
允許面板中傳入不同的內容

示例

改造之前的折疊面板案例, 想要實現不同內容顯示, 我們把折疊面板里的Pannel組件, 添加組件插槽方式

參考代碼
定義組件

<template><div><!-- 按鈕標題 --><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展開" }}</span></div><!-- 下拉內容 --><div class="container" v-show="isShow"> + <slot></slot></div></div> </template><script> export default {data() {return {isShow: false,};}, }; </script><style scoped> h3 {text-align: center; }.title {display: flex;justify-content: space-between;align-items: center;border: 1px solid #ccc;padding: 0 1em; }.title h4 {line-height: 2;margin: 0; }.container {border: 1px solid #ccc;padding: 0 1em; }.btn {/* 鼠標改成手的形狀 */cursor: pointer; }img {width: 50%; } </style> <template><div id="container"><div id="app"><h3>案例：折疊面板</h3><Pannel><img src="../assets/mm.gif" alt="" /><span>我是文字哦</span></Pannel><Pannel><img src="../assets/mm.gif" alt="" /><span>我是文字哦</span></Pannel><Pannel><div><p>寒雨連江夜入吳,</p><p>平明送客楚山孤。</p><p>洛陽親友如相問，</p><p>一片冰心在玉壺。</p></div></Pannel></div></div> </template><script> import Pannel from "./Pannel"; export default {components: {Pannel,}, }; </script><style> #app {width: 400px;margin: 20px auto;background-color: #fff;border: 4px solid blueviolet;border-radius: 1em;box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);padding: 1em 2em 2em; } </style>

注意點
插槽里面的兩種方式:
1–默認的插槽
在父組件里面的子組件標簽中間 添加結構樣式 在子組件的template里面設置
默認的內容 接收
2— 定義名字浮動方式
父組件里面

**

自定義指令-基本使用

**
自定義指令文檔（了解）
除了核心功能默認內置的指令 (v-model 和 v-show)等，Vue 也允許注冊自定義指令=》 v-xxx
html+css+js的復用的主要形式是組件
你需要對普通 DOM 元素進行底層操作，這時候就會用到自定義指令
作用
擴展標簽額外的功能
自定義指令-定義方式

 { data(){}, methods: {}, directives: { focus: { // 自定義指令名 inserted(el){ // 固定配置項 - 當指令插入到標簽自動觸發此函數 el.focus() } }, },  }

示例 自動獲取焦點

<template> <div> <input type="text" v-focus /> </div>  </template>  ?  <script>  export default { // 注冊 directives: { focus: { // 自定義指令名 inserted(el){ // 固定配置項 - 當指令插入到標簽自動觸發此函數 el.focus() } } }  }  </script>

**

自定義指令-傳值和更新

**
目標: 使用自定義指令, 傳入一個值
需求: 定義color指令-傳入一個顏色, 給標簽設置文字顏色
main.js定義處修改一下

directives: {"color":{inserted(el, binding){ // 插入時觸發此函數el.style.color = binding.value;},update(el, binding){ // 更新綁定的變量時觸發此函數=》手動更新el.style.color = binding.value;}} }

Direct.vue處更改一下

<p v-color="theColor" @click="changeColor">使用v-color指令控制顏色, 點擊變藍</p><script>data() {return {theColor: "red",};},methods: {changeColor() {this.theColor = 'blue';},}, </script>

總結

以上是生活随笔為你收集整理的动态组件_插槽的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。