【Vue】高階系列(二)Vue相關小知識

語言: CN / TW / HK

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菌做好朋友

「其他文章」