Props 混入 外掛 插槽 本地儲存

HuangQiaoqi發表於2024-05-04

Props介紹

Props作為元件的核心特性之一，也是我們平時開發Vue專案中接觸最多的特性之一，它可以讓元件的功能變得豐富，也是父子元件通訊的一個渠道。

【1】普通傳值

在元件的標籤上自定義屬性，用屬性繫結給改自定義屬性繫結一個變數，元件內部定義props陣列，將自定義的屬性名填入，即可在元件內使用父元件傳入的變數，變數名就是自定義的元件。

父元件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
      // 自定義屬性，並且繫結一個變數message
    <index :mymessage="message"></index>
  </div>
</template>

<script>
import index from "../components/index.vue";
export default {
  name: 'HomeView',
  data(){
    return{
      message:'hqq'
    }
  },
  components: {
    HelloWorld,
    index
  }
}
</script>

子元件

<template>
  <div class="index">
    <h1>我是小元件</h1>
    <button @click="handleShow">點我看控制檯</button>
  </div>
</template>

<style scoped>

</style>


<script>
export default {
  name: 'index',
  data(){
    return{
      name:''
    }
  },
  methods:{
    handleShow(){
      console.log(this.mymessage)
    }
  },
    // 使用props陣列接收mymessage自定義屬性名，就可以在當前元件使用這個變數
  props:['mymessage']
}
</script>

【2】限制資料型別

透過給子元件的props傳一個物件{{自定義屬性名: 資料型別}}這樣子就會限制父元件傳來的資料的型別，如果傳了不同的型別的資料，瀏覽器控制檯會警告，但是不會直接報錯。

子元件

<script>
export default {
  name: 'index',
  data() {
    return {
      name: ''
    }
  },
  methods: {
    handleShow() {
      console.log(this.mymessage)
    }
  },
    // 給props傳一個物件
  props: {mymessage: String}
}
</script>

【3】傳物件

這樣做可以對父元件傳來的資料進一步限制

子元件

  props: {
    name:'mymessage', // 自定義屬性名
    required:true, // 是否是必須填的
    type:String, // 限制資料型別
    default:'隔壁老王來了' // 預設值
  }

混入

mixin混入，可以把多個元件共用的配置提取成一個混入物件，這樣就不需要在每個元件都寫了。

就相當於寫了一個功能，很多個頁面都需要用這個功能，這時候就可以把這個功能封裝起來，下次需要使用的時候直接匯入就行

【1】封裝 匯出

最好建立一個資料夾，mixin，再建立一個index.js，在這裡面寫封裝的功能

const hunru = {
    data() {
        return {
            title: '好好學習'
        }
    },
    methods: {
        handleClick() {
            alert(this.title)
            console.log(this.title)
        }
    }
}
// 一定要把功能匯出
export default hunru

【2】匯入

在需要使用的頁面匯入該模組，配置mixins屬性

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="handleClick">彈窗</button>
  </div>
</template>

<script>
    // 匯入模組
import hunru from "@/mixin";
export default {
  name:'about',
  data(){
    return{

    }
  },
  methods:{},
    // 配置mixins 將模組名填入陣列
  mixins:[hunru]
}
</script>

【3】全域性使用

上面的方法都是區域性使用的方法，也可以進行全域性配置，在main.js裡面進行全域性配置

import hunru from "@/mixin";
Vue.mixin(hunru)

外掛

外掛其實就是vue的增強功能，通常用來為vue新增全域性功能

【1】常見功能

一般有以下幾種功能

  1. 新增全域性方法或者 property。如: vue-custom-element
  2. 新增全域性資源: 指令/過濾器/過渡等。如 vue-touch
  3. 透過全域性混入來新增一些元件選項。如 vue-router
  4. 新增 Vue 例項方法，透過把它們新增到 Vue.prototype 上實現。
  5. 一個庫，提供自己的 API，同時提供上面提到的一個或多個功能。如 vue-router

【2】開發外掛

開發外掛也叫定義外掛，主要是透過install方法來暴露的，引數，vue例項以及自定義引數。無論在install中寫什麼，vue都會替你執行

export default {
    install(a) {
        // 1 定義全域性變數
        Vue.prototype.name = 'hqq'
        // 2 定義全域性變數最好加上$字首，防止汙染
        Vue.prototype.$axios = axios
        // 3 可以直接定義一個函式，如登入，以後要登入直接呼叫即可
        Vue.prototype.$login = (url, username, password) => {
            axios.post('http://127.0.0.1:8000/api/v1/user/login/', {
                username: username,
                password: password
            })
                .then((response) => {
                    alert('登入成功')
                })
        }
    }
}

export default {
  install: function(Vue) {
    console.log('Vue', Vue);
    // 1. 新增全域性方法或 property  
    Vue.myGlobalMethod = function () {  
      console.log('這是外掛的全域性方法');
    }  

    // 2. 新增全域性資源  
    Vue.directive('my-directive', {  
      bind (el, binding, vnode, oldVnode) {  
        console.log('這是外掛的全域性指令'); 
      }   
    })  

    // 3. 注入元件選項  
    Vue.mixin({  
      created: function () {  
        console.log('這是外掛的混入');
      }   
    })  

    // 4. 新增例項方法  
    Vue.prototype.$myMethod = function (methodOptions) {  
      console.log('這是外掛的例項方法');
    }
  }
}

【3】使用外掛

使用外掛分為全域性引用和區域性引用

全域性引用

在main.js中引入並且使用

// 引入
import my from '@/plugins'

// 使用
Vue.use(my)

區域性引用

區域性引用，在需要用到外掛的頁面use就行

<script>

// 匯入外掛
import my from '../plugins'
// 匯入Vue例項
import Vue from "vue";

export default {
  name: 'HomeView',
  created() {
    console.log(this.name)
      // 使用外掛
    Vue.use(my)
      // 輸出外掛裡面定義的name
    console.log('hahaha',this.name)
  }

}
</script>

插槽

Vue插槽的主要作用是承載分發內容的出口，分為匿名插槽具名插槽和作用域插槽三種

以下面為例子

  • child.vue：封裝 name 為 ChildExample 的元件
  • parent.vue：引入 child.vue，呼叫 ChildExample 元件

【1】匿名插槽

<slot> </slot>是最常用的插槽，根據需要自定義內容

// child.vue
<slot></slot>

// parent.vue
<child-example>
  <span>這是匿名插槽的內容</span>
</child-example>

【2】具名插槽

假設一個插槽滿足不了要求，需要設定多個插槽，那麼就必須要給插槽賦name值

匿名插槽是特殊的具名插槽，它的name為default

// child.vue
<slot name="left"></slot>
<slot name="right"></slot>

// parent.vue
<child-example>
  <span slot="left">這是具名插槽left的內容</span>

  <!-- 2.6.0 + -->
  <template v-slot:right>
    <span>這是具名插槽right的內容</span>
  </template>
</child-example>

本地儲存

本地儲存通常用於儲存使用者登入資訊

通常有三種方式sessionStorage，localStorage和vue-cookies

vue-cookies是第三方外掛，需要下載

【1】sessionStorage和localstorage的區別

  1. sessionStorage 中的資料僅在當前會話有效，也就是說當使用者增加了標籤頁或者關閉瀏覽器之後，儲存的資料就會丟失。
  2. localstorage 中的資料可以說是永久有效的，只要使用者不主動清除，就會一直存在。

【2】操作sessionStorage

// 增
sessionStorage.setItem(‘key’, ‘value’)
// 查
sessionStorage.getItem(‘key’)
// 刪除單個key資料
sessionStorage.removeItem(‘key’)
// 清除sessionStorage所有資料
sessionStorage.clear()

【3】操作localstorage

// 增
localstorage.setItem(‘key’, ‘value’)
// 查
localstorage.getItem(‘key’)
// 刪除單個key資料
localstorage.removeItem(‘key’)
// 清除sessionStorage所有資料
localstorage.clear()

【3】使用vue-cookies

這是一個簡單的Vue.js外掛，專門用於在vue中處理瀏覽器的cookie操作，vue-cookies沒有依賴關係，它可以獨立存在，對vuejs友好。

安裝 引用

// 安裝
npm install vue-cookies --save

// 引用
import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.use(VueCookies)

API

//不寫過期時間，預設為1天過期
this.$cookies.set("token","123456")

// 1天過期，忽略大小寫
this.$cookies.set("token","12346","1d")
this.$cookies.set("token","123456","1D")
// 以秒為單位，設定1天過去
this.$cookies.set("token","123456",60 * 60 * 24)

// 填寫Date物件，明確指定過期時間
this.$cookies.set("token","123456", new Date(2020, 10, 01))

// 填寫一個時間字串，指定過期時間
this.$cookies.set("token","123456", "Sat, 13 Mar 2017 12:25:57 GMT")

//瀏覽器會話結束時過期
this.$cookies.set("token","input_value","0");

//永不過期
this.$cookies.set("token","input_value",-1);

相關文章