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

props校驗(yàn)

普通格式：props: ["propA", "propB"]。沒有類型檢查

高階格式：

props: {
    // 基礎(chǔ)的類型檢查 (`null` 和 `undefined` 會通過任何類型驗(yàn)證)
    propA: Number,
    // 多個(gè)可能的類型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 帶有默認(rèn)值的數(shù)字
    propD: {
      type: Number,
      default: 100
    },
    // 帶有默認(rèn)值的對象
    propE: {
      type: Object,
      // 對象或數(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
      }
    }
  }
復(fù)制代碼


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

目標(biāo)效果

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

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

目錄結(jié)構(gòu)

根組件
├── App.vue
└── components
    ├── UserName.vue # 用戶名和密碼輸入框
    └── UserInfo.vue # 人生格言和自我介紹框
復(fù)制代碼


格式

<component :is="comName"></component>

操作

UserName.vue

<template>
  <div>
    <h2>UserName</h2>
    <p>用戶名:<input /> </p>
    <p>密碼:<textarea /> </p>
  </div>
</template>

<script>
export default {

}
</script>
復(fù)制代碼


在父組件App.vue中使用

<template>
  <div>
    <button @click="comName = 'UserName'">賬號密碼填寫</button>
    <button @click="comName = 'UserInfo'">個(gè)人信息填寫</button>

    <p>下面顯示注冊組件:</p>
    <div style="border: 1px solid red">
      <!-- vue內(nèi)置的組件component, 可以動態(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>
復(fù)制代碼


注意

• is只能是動態(tài)屬性=》:is="組件注冊后的標(biāo)簽名字符串或data變量"
• 不能直接拿注冊標(biāo)簽名賦值使用

小結(jié)

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

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

目標(biāo)

掌握組件緩存的使用

背景

組件切換會導(dǎo)致組件被頻繁銷毀和重新創(chuàng)建, 大多數(shù)情況下是有自己的意義的，但也可能會導(dǎo)致不必要的性能損耗

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

keep-alive

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

格式

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

補(bǔ)充生命周期:

• activated - 激活
• deactivated - 失去激活狀態(tài)

<keep-alive>
    <!-- vue內(nèi)置的組件component, 可以動態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>
復(fù)制代碼


小結(jié)

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

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

目標(biāo)

掌握keep-alive的include屬性的用法

語法

1. `include="組件名1,組件名2..."`


2. `:include="['組件名1'， '組件名2']"`


<keep-alive include="name1,name2">
    <!-- vue內(nèi)置的組件component, 可以動態(tài)顯示組件 -->
    <component :is="comName"></component>
</keep-alive>
復(fù)制代碼


注意：

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

組件進(jìn)階 - 默認(rèn)插槽

目標(biāo)

掌握組件插槽的使用

理解

生活中的插槽

vue中的插槽

1. 組件通過插槽傳入自定義結(jié)構(gòu)
2. 用于實(shí)現(xiàn)組件的內(nèi)容分發(fā), 通過 slot 標(biāo)簽, 可以接收到寫在組件標(biāo)簽內(nèi)的內(nèi)容
3. vue提供組件插槽能力, 允許開發(fā)者在封裝組件時(shí)，把不確定的部分定義為插槽

格式

在定義組件時(shí)，在template中用slot來占個(gè)坑；

使用時(shí)，將組件之間的內(nèi)容來填坑；

示例

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

目標(biāo)

掌握具名插槽的使用

背景

當(dāng)一個(gè)組件內(nèi)有2處以上需要外部傳入標(biāo)簽的地方

格式

定義：

使用：

• <template #xxx>;
• 
  

圖示：

1. 傳入的標(biāo)簽可以分別派發(fā)給不同的slot位置
2. v-slot一般跟template標(biāo)簽使用 (template是html5新出標(biāo)簽內(nèi)容模板元素, 不會渲染到頁面上, 一般被vue解析為內(nèi)部標(biāo)簽)

示例

1. 子組件-Pannel2.vue


<div class="container" v-show="isShow">
    <slot name="one"></slot>
    <slot name="two"></slot>
</div>
復(fù)制代碼


2 .父組件-UseSlot2.vue

v-slot可以簡化成#使用

v-bind可以省略成:

v-on: 可以省略成@

v-slot: 可以簡化成#

寫法1:

<Pannel2>
    <template v-slot:one>
  <img src="../assets/mm.gif" alt="" />
    </template>
    <template v-slot:two>
  <span>我是文字哦</span>
    </template>
</Pannel2>
復(fù)制代碼


寫法2：

<Pannel2>
    <!-- 簡化寫法 -->
    <template #one>
  <div>
            <p>寒雨連江夜入?yún)?</p>
            <p>平明送客楚山孤。</p>
            <p>洛陽親友如相問，</p>
            <p>一片冰心在玉壺。</p>
        </div>
    </template>
    <template #two>
  <img src="../assets/mm.gif" alt="" />
    </template>
</Pannel2>
復(fù)制代碼


小結(jié)

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

組件進(jìn)階-作用域插槽（難點(diǎn)）

目標(biāo)

掌握作用域插槽的用法

目標(biāo): 子組件中的數(shù)據(jù), 在給插槽賦值時(shí)在父組件環(huán)境下使用=> 子傳父=》傳數(shù)據(jù)

步驟

• 創(chuàng)建子組件, 準(zhǔn)備slot, 在slot上綁定屬性和子組件值
• 使用子組件, 傳入自定義標(biāo)簽, 用template和v-slot="自定義變量名"
• 自定義變量名會自動綁定slot上所有屬性, 就可以使用子組件內(nèi)值, 并替換slot位置

示例

具名插槽, 給slot綁定屬性和值

<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h2>子組件</h2>
    <!-- 給slot上補(bǔ)充自定義的屬性 -->
    <slot name="content" :a="1" :b="2">
      默認(rèn)內(nèi)容
    </slot>
  </div>
</template>

<script>
export default {
}
</script>
復(fù)制代碼


2. 父組件


<template>
  <div style="border:1px solid #ccc; margin:5px;padding:5px">
    <h1>45-插槽-作用域插槽</h1>


    <MyCom>
      <!-- 
        v-slot:插槽名="對象" 
      對象會自動接收這個(gè)插槽傳遞回來自定義屬性
      -->
      <template v-slot:content="scope">
        <!-- <h1>自定義的內(nèi)容，填坑, {{scope}}</h1> -->
        <h3>{{scope.a}}</h3>
        <p>{{scope.b}}</p>
      </template>
    </MyCom>
  </div>
</template>

<script>

// 父傳子
//  1.傳數(shù)據(jù)。 自定義屬性    （父）  props(子)
//  2.傳結(jié)構(gòu)。 在組件中寫內(nèi)容（父）  slot (子)

import MyCom from './MyCom.vue'
export default {
  components: { MyCom }
}
</script>

<style scoped>
.content{
background-color: #ccc;
}
</style>
復(fù)制代碼


小結(jié)

組件內(nèi)變量綁定在slot上, 然后使用組件v-slot:插槽名字="變量" ，變量上就會綁定slot傳遞的屬性和值

自定義指令-基本使用

自定義指令文檔[1]（了解）

除了核心功能默認(rèn)內(nèi)置的指令 (v-model 和 v-show)等，Vue 也允許注冊自定義指令=》 v-xxx

1. html+css+js的復(fù)用的主要形式是組件
2. 你需要對普通 DOM 元素進(jìn)行底層操作，這時(shí)候就會用到自定義指令

作用

擴(kuò)展標(biāo)簽額外的功能

自定義指令-定義方式

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


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

<template>
  <div>
    <input type="text" v-focus />
  </div>
</template>

<script>
export default {
  // 注冊
  directives: {
    focus: { // 自定義指令名
        inserted(el){ // 固定配置項(xiàng) - 當(dāng)指令插入到標(biāo)簽自動觸發(fā)此函數(shù)
            el.focus()
        }
    }
  }
}
</script>
復(fù)制代碼


自定義指令-傳值和更新

目標(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ù)=》手動更新
      el.style.color = binding.value;
    }
  }
}
復(fù)制代碼


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>
復(fù)制代碼


總結(jié): v-xxx, 自定義指令, 獲取原生DOM, 自定義操作

關(guān)于本文

作者：pain_past_is_pleasur

https://juejin.cn/post/7095716277196587039

最后