【Vue】高階系列(二)Vue相關小知識
theme: vue-pro highlight: a11y-dark
嗨!~ 大家好,我是YK菌 🐷 ,一個微系前端 ✨,愛思考,愛總結,愛記錄,愛分享 🏹,歡迎關注我呀 😘 ~ [微訊號:
yk2012yk2012
,微信公眾號:ykyk2012
]
「這是我參與11月更文挑戰的第24天,活動詳情檢視:2021最後一次更文挑戰」
今天我們主要來學習Vue的一些相關小知識包括ref、props、mixin、外掛、nextTick、slot等,學習時的一些小筆記
ref屬性
- 被用來給元素或子元件註冊引用資訊(id的替代者)
- 應用在html標籤上獲取的是真實DOM元素,應用在元件標籤上是元件例項物件(vc)
- 使用方式:
- 打標識:
<h1 ref="xxx">.....</h1>
或<School ref="xxx"></School>
- 獲取:
this.$refs.xxx
- 打標識:
```html
```
props配置項
-
功能:讓元件接收外部傳過來的資料
-
傳遞資料:
<Demo name="xxx"/>
-
接收資料:
-
第一種方式(只接收):
props:['name']
-
第二種方式(限制類型):
props:{name:String}
-
第三種方式(限制類型、限制必要性、指定預設值):
-
js
props:{
name:{
type:String, //型別
required:true, //必要性
default:'老王' //預設值
}
}
備註:props是隻讀的,Vue底層會監測你對props的修改,如果進行了修改,就會發出警告,若業務需求確實需要修改,那麼請複製props的內容到data中一份,然後去修改data中的資料。
```html
```
mixin(混入)
-
功能:可以把多個元件共用的配置提取成一個混入物件
-
使用方式:
第一步定義混合:
javascript
{
data(){....},
methods:{....}
....
}
第二步使用混入:
- 全域性混入:
Vue.mixin(xxx)
- 區域性混入:
mixins:['xxx']
mixin.js
```javascript export const hunhe = { methods: { showName() { alert(this.name); }, }, mounted() { console.log("你好啊!"); }, }; export const hunhe2 = { data() { return { x: 100, y: 200, }; }, };
main.js
javascript
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {hunhe,hunhe2} from './mixin'
//關閉Vue的生產提示
Vue.config.productionTip = false
Vue.mixin(hunhe) Vue.mixin(hunhe2)
//建立vm new Vue({ el:'#app', render: h => h(App) }) ``` 元件中
```html
```
Vue外掛
-
功能:用於增強Vue
-
本質:包含install方法的一個物件,install的第一個引數是Vue,第二個以後的引數是外掛使用者傳遞的資料。
-
定義外掛:
```js 物件.install = function (Vue, options) { // 1. 新增全域性過濾器 Vue.filter(....)
// 2. 新增全域性指令
Vue.directive(....)
// 3. 配置全域性混入(合)
Vue.mixin(....)
// 4. 新增例項方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx
} ```
- 使用外掛:
Vue.use()
plugins.js
```javascript export default { install(Vue, x, y, z) { console.log(x, y, z); //全域性過濾器 Vue.filter("mySlice", function (value) { return value.slice(0, 4); });
//定義全域性指令
Vue.directive("fbind", {
//指令與元素成功繫結時(一上來)
bind(element, binding) {
element.value = binding.value;
},
//指令所在元素被插入頁面時
inserted(element, binding) {
element.focus();
},
//指令所在的模板被重新解析時
update(element, binding) {
element.value = binding.value;
},
});
//定義混入
Vue.mixin({
data() {
return {
x: 100,
y: 200,
};
},
});
//給Vue原型上新增一個方法(vm和vc就都能用了)
Vue.prototype.hello = () => {
alert("你好啊");
};
}, };
``` main.js
```javascript //引入Vue import Vue from "vue"; //引入App import App from "./App.vue"; //引入外掛 import plugins from "./plugins"; //關閉Vue的生產提示 Vue.config.productionTip = false;
//應用(使用)外掛 Vue.use(plugins, 1, 2, 3); //建立vm new Vue({ el: "#app", render: (h) => h(App), });
``` 元件中使用
```html
```
scoped樣式
- 作用:讓樣式在區域性生效,防止衝突。
- 寫法:
<style scoped>
nextTick
- 語法:
this.$nextTick(回撥函式)
- 作用:在下一次 DOM 更新結束後執行其指定的回撥。
- 什麼時候用:當改變資料後,要基於更新後的新DOM進行某些操作時,要在nextTick所指定的回撥函式中執行。
插槽slot
-
作用:讓父元件可以向子元件指定位置插入html結構,也是一種元件間通訊的方式,適用於 父元件 ===> 子元件
-
分類:預設插槽、具名插槽、作用域插槽
-
使用方式:
1. 預設插槽
父元件中:
```html
```
子元件中:
html
<template>
<div>
<!-- 定義插槽 -->
<slot>插槽預設內容...</slot>
</div>
</template>
案例
App.vue
```html
```
Category.vue
```html
```
2. 具名插槽
父元件中:
```html
<template v-slot:footer>
<div>html結構2</div>
</template>
```
子元件中:
html
<template>
<div>
<!-- 定義插槽 -->
<slot name="center">插槽預設內容...</slot>
<slot name="footer">插槽預設內容...</slot>
</div>
</template>
案例
App.vue ```html
Category.vue
html
```
3. 作用域插槽
-
理解:資料在元件的自身,但根據資料生成的結構需要元件的使用者來決定。(games資料在Category元件中,但使用資料所遍歷出來的結構由App元件決定)
-
具體編碼:
父元件中:
```html
子元件中: ```html
```
案例
App.vue ```html
Category.vue
html
```
最後,歡迎關注我的專欄,和YK菌做好朋友
- 【TS】快速上手(四)配置選項 - 編譯選項compilerOptions
- 【LeetCode】圖解反轉連結串列 - 迭代 - 遞迴
- 【LeetCode】最大子序和從O(N^3)到O(N) - 暴力初探 - 分而治之 - 線上處理
- 【JS】JavaScript基礎知識自我檢查大過關(第三關)函式定義與呼叫
- 【Vue】高階系列(六)Vue-cli配置代理 -demo3-GitHub使用者查詢-axios
- 【Vue】高階系列(五)元件間通訊
- 【Vue】高階系列(四)Vue模組化實戰-demo2-任務清單todoList
- 【TS】快速上手(二)型別宣告
- 【Vue】高階系列(三)Vue模組化實戰-demo1-動態評價頁面
- 【Vue】高階系列(二)Vue相關小知識
- 【Vue】高階系列(一)Vue元件定義與使用 - 非單檔案元件 - 單檔案元件 - VueComponent
- 【Vue】基礎系列(十一)Vue指令-常用內建指令-自定義指令-全域性指令-區域性指令
- 【Vue】基礎系列(九)動畫與過渡-trasition-enter-leave
- 【Vue】基礎系列(八)生命週期 - 初始化顯示 - 更新狀態 - 死亡狀態 - 父子元件
- 【Vue】基礎系列(七)v-model - 自動收集資料 - 表單資料自動更新
- 【Vue】基礎系列(六)事件處理 - 繫結監聽 - 事件修飾符 - 按鍵修飾符
- 【Vue】基礎系列(四)樣式繫結 - class - style
- 【Vue】基礎系列(二)模板語法 - 插值語法 - 指令語法 - | v-bind | v-model | v-on | v-if | v- show
- 【Vue】實戰專案:電商後臺管理系統(九)專案優化 上線
- 【Vue】實戰專案:電商後臺管理系統(八)資料統計模組