【Vue】高階系列（二）Vue相關小知識

語言: CN / TW / HK
時間 2021-11-25 13:15:15

theme: vue-pro highlight: a11y-dark

嗨！~ 大家好，我是YK菌 🐷 ，一個微系前端 ✨，愛思考，愛總結，愛記錄，愛分享 🏹，歡迎關注我呀 😘 ~ [微訊號: yk2012yk2012，微信公眾號：ykyk2012]

「這是我參與11月更文挑戰的第24天，活動詳情檢視：2021最後一次更文挑戰」

今天我們主要來學習Vue的一些相關小知識包括ref、props、mixin、外掛、nextTick、slot等，學習時的一些小筆記

ref屬性

  1. 被用來給元素或子元件註冊引用資訊（id的替代者）
  2. 應用在html標籤上獲取的是真實DOM元素，應用在元件標籤上是元件例項物件（vc）
  3. 使用方式：
    1. 打標識：<h1 ref="xxx">.....</h1>或 <School ref="xxx"></School>
    2. 獲取：this.$refs.xxx

```html

```

props配置項

  1. 功能：讓元件接收外部傳過來的資料

  2. 傳遞資料：<Demo name="xxx"/>

  3. 接收資料：

    1. 第一種方式（只接收）：props:['name']

    2. 第二種方式（限制類型）：props:{name:String}

    3. 第三種方式（限制類型、限制必要性、指定預設值）：

js props:{ name:{ type:String, //型別 required:true, //必要性 default:'老王' //預設值 } }

備註：props是隻讀的，Vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中一份，然後去修改data中的資料。

```html

```

mixin(混入)

  1. 功能：可以把多個元件共用的配置提取成一個混入物件

  2. 使用方式：

    第一步定義混合：

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.jsjavascript //引入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外掛

  1. 功能：用於增強Vue

  2. 本質：包含install方法的一個物件，install的第一個引數是Vue，第二個以後的引數是外掛使用者傳遞的資料。

  3. 定義外掛：

```js 物件.install = function (Vue, options) { // 1. 新增全域性過濾器 Vue.filter(....)

// 2. 新增全域性指令
Vue.directive(....)

// 3. 配置全域性混入(合)
Vue.mixin(....)

// 4. 新增例項方法
Vue.prototype.$myMethod = function () {...}
Vue.prototype.$myProperty = xxxx

} ```

  1. 使用外掛：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樣式

  1. 作用：讓樣式在區域性生效，防止衝突。
  2. 寫法：<style scoped>

nextTick

  1. 語法：this.$nextTick(回撥函式)
  2. 作用：在下一次 DOM 更新結束後執行其指定的回撥。
  3. 什麼時候用：當改變資料後，要基於更新後的新DOM進行某些操作時，要在nextTick所指定的回撥函式中執行。

插槽slot

  1. 作用：讓父元件可以向子元件指定位置插入html結構，也是一種元件間通訊的方式，適用於 父元件 ===> 子元件

  2. 分類：預設插槽、具名插槽、作用域插槽

  3. 使用方式：

1. 預設插槽

父元件中： ```html

html結構1

```

子元件中： 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.vuehtml

```

3. 作用域插槽

  1. 理解：資料在元件的自身，但根據資料生成的結構需要元件的使用者來決定。（games資料在Category元件中，但使用資料所遍歷出來的結構由App元件決定）

  2. 具體編碼：

父元件中： ```html

```

子元件中： ```html

```

案例

App.vue ```html

Category.vuehtml

```

最後，歡迎關注我的專欄，和YK菌做好朋友

「其他文章」
「」
「」