**

組件進(jìn)階 - 動(dòng)態(tài)組件

**

**

組件進(jìn)階-props校驗(yàn)

**
props校驗(yàn)
普通格式： props: [“propA”, “propB”]。沒(méi)有類型檢查
高階格式：

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

默認(rèn)返回一個(gè)工廠函數(shù),每次調(diào)用都會(huì)返回一個(gè)新的 數(shù)組結(jié)果

需求: 完成一個(gè)注冊(cè)功能頁(yè)面, 2個(gè)按鈕切換, 額外封裝兩個(gè)組件：一個(gè)填寫(xiě)注冊(cè)信息, 一個(gè)填寫(xiě)用戶簡(jiǎn)介信息

目標(biāo): 多個(gè)組件使用同一個(gè)掛載點(diǎn)，并可以動(dòng)態(tài)切換，這就是動(dòng)態(tài)組件

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

在父組件App.vue中使用

<template><div><button @click="comName = 'UserName'">賬號(hào)密碼填寫(xiě)</button><button @click="comName = 'UserInfo'">個(gè)人信息填寫(xiě)</button><p>下面顯示注冊(cè)組件:</p><div style="border: 1px solid red"><!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 --><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只能是動(dòng)態(tài)屬性=》:is=“組件注冊(cè)后的標(biāo)簽名字符串或data變量”
● 不能直接拿注冊(cè)標(biāo)簽名賦值使用

小結(jié)
vue內(nèi)置component組件, 配合is屬性, 設(shè)置要顯示的組件標(biāo)簽名字

**

組件進(jìn)階-keep-alive組件

**
掌握組件緩存的使用

背景

組件切換會(huì)導(dǎo)致組件被頻繁銷毀和重新創(chuàng)建, 性能不高

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

演示1: 可以先給UserName.vue和UserInfo.vue 注冊(cè)created和destroyed生命周期事件, 觀察創(chuàng)建和銷毀過(guò)程

演示2: 使用keep-alive內(nèi)置的vue組件, 讓動(dòng)態(tài)組件緩存而不是銷毀

補(bǔ)充生命周期:

● activated - 激活 缺點(diǎn): 消耗內(nèi)存空間
● deactivated - 失去激活狀態(tài)

<keep-alive><!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 --><component :is="comName"></component> </keep-alive>

小結(jié)
keep-alive可以提高組件的性能, 內(nèi)部包裹的標(biāo)簽不會(huì)被銷毀和重新創(chuàng)建, 觸發(fā)激活和非激活的生命周期方法

**

組件進(jìn)階-keep-alive組件-指定緩存

**

目標(biāo)
掌握keep-alive的include屬性的用法
語(yǔ)法

1. include="組件名1,組件名2..." 2. :include="['組件名1'， '組件名2']" <keep-alive include="name1,name2"><!-- vue內(nèi)置的組件component, 可以動(dòng)態(tài)顯示組件 --><component :is="comName"></component> </keep-alive>

注意：

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

**

組件進(jìn)階-具名插槽

**

目標(biāo)
掌握具名插槽的使用
背景
當(dāng)一個(gè)組件內(nèi)有2處以上需要外部傳入標(biāo)簽的地方
格式

定義： <slot name="xxx">

使用：

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

傳入的標(biāo)簽可以分別派發(fā)給不同的slot位置

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

小結(jié)
3. slot有可以設(shè)置多個(gè)
4. 定義組件時(shí)：slot的name屬性起插槽名
5. 使用組件時(shí), template配合#插槽名傳入具體html標(biāo)簽或組件

**

案例:

**
插槽的案例-升級(jí)折疊面板

需求
允許面板中傳入不同的內(nèi)容

示例

改造之前的折疊面板案例, 想要實(shí)現(xiàn)不同內(nèi)容顯示, 我們把折疊面板里的Pannel組件, 添加組件插槽方式

參考代碼
定義組件

<template><div><!-- 按鈕標(biāo)題 --><div class="title"><h4>芙蓉樓送辛漸</h4><span class="btn" @click="isShow = !isShow">{{ isShow ? "收起" : "展開(kāi)" }}</span></div><!-- 下拉內(nèi)容 --><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 {/* 鼠標(biāo)改成手的形狀 */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>寒雨連江夜入?yún)?</p><p>平明送客楚山孤。</p><p>洛陽(yáng)親友如相問(wèn)，</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>

注意點(diǎn)
插槽里面的兩種方式:
1–默認(rèn)的插槽
在父組件里面的子組件標(biāo)簽中間 添加結(jié)構(gòu)樣式 在子組件的template里面設(shè)置
默認(rèn)的內(nèi)容 接收
2— 定義名字浮動(dòng)方式
父組件里面

**

自定義指令-基本使用

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

 { data(){}, methods: {}, directives: { focus: { // 自定義指令名 inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動(dòng)觸發(fā)此函數(shù) el.focus() } }, },  }

示例 自動(dòng)獲取焦點(diǎn)

<template> <div> <input type="text" v-focus /> </div>  </template>  ?  <script>  export default { // 注冊(cè) directives: { focus: { // 自定義指令名 inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動(dòng)觸發(fā)此函數(shù) el.focus() } } }  }  </script>

**

自定義指令-傳值和更新

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

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

Direct.vue處更改一下

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。