Vue 3 動態(tài) ref 的使用方式（表格）

一、問題描述

先給大家簡單介紹一下問題背景。我正在開發(fā)的項目中，有一個表格組件，其中一列是分鏡描述，需要支持視頻上傳功能。用戶可以為每一行的分鏡描述上傳對應(yīng)的視頻示例。然而，在實現(xiàn)過程中，出現(xiàn)了一個嚴重的問題：當表格有多行數(shù)據(jù)時，點擊某一行的本地上傳按鈕，選擇文件后，數(shù)據(jù)卻總是跑到最后一行。這顯然不符合預(yù)期，嚴重影響了用戶體驗和功能的正確性。

二、解決

1、創(chuàng)建了一個inputRefs對象來存儲input元素的引用： 

const shotVideInputRefs = ref<Record<string, HTMLInputElement>>({});

2、在模板中，通過以下方式綁定ref：

  <input :key="row.id" :ref="(el) => (shotVideInputRefs[row.id] = el as HTMLInputElement)" type="file" @change="handleShotFileChange(row, $event)" />

3、觸發(fā)文件上傳對話框的方法：根據(jù)當前行的id來獲取對應(yīng)的input引用并觸發(fā)點擊事件：

const triggerShotVideoInput = (rowId) => {
  if (shotVideInputRefs.value[rowId]) {
    shotVideInputRefs.value[rowId].click();
  }
};

擴展：vue Router(v3.x) 路由傳參的三種方式場景分析

推薦閱讀：

vue Router(v3.x) 路由傳參的三種方式場景分析

詳解vue-router傳參的兩種方式

vue Router(v3.x) 路由傳參的三種方式

vue 路由傳參的使用場景一般都是應(yīng)用在父路由跳轉(zhuǎn)到子路由時，攜帶參數(shù)跳轉(zhuǎn)。傳參方式可劃分為 params 傳參和 query 傳參，而 params 傳參又可分為在 url 中顯示參數(shù)和不顯示參數(shù)兩種方式，這就是vue路由傳參的三種方式。

當然 ，這三種傳參方式只是針對vue Router V3版本的，V4版本的路由傳參會有些不同；V3版本經(jīng)常與vue2相配合使用；而V4版本則多和vue3配合使用；

一，params 傳參（顯示參數(shù)）

這種方式vue router官網(wǎng)也叫 動態(tài)路由匹配；

1,，首先需要在路由表中配置 冒號+參數(shù)（/user/:id）

  	// 這是動態(tài)路由 加上：/:id
      {
        path: "/routers/:id",
        name: "Routers",
        meta: { title: "動態(tài)路由" },
        component: () => import("../views/routers/routers.vue")
      },

2，開始跳轉(zhuǎn)并傳參

jumpTo() {
      this.$router.push({ path: "/routers/123" });
    }

3，獲取動態(tài)路由參數(shù)

created(){
	console.log('獲取', this.$route.params); //{id: '123'}
}

當然，你也可以傳多個參數(shù)，只不過需要在路由表中配置多個，如下：

注意： 響應(yīng)路由參數(shù)的變化

注意：當使用路由參數(shù)時，例如從 /user/foo 導(dǎo)航到 /user/bar，原來的組件實例會被復(fù)用。因為兩個路由都渲染同個組件，比起銷毀再創(chuàng)建，復(fù)用則顯得更加高效。不過，這也意味著組件的生命周期鉤子不會再被調(diào)用。

復(fù)用組件時，想對路由參數(shù)的變化作出響應(yīng)的話，你可以簡單地 watch (監(jiān)測變化) $route 對象：

const User = {
  template: '...',
  watch: {
    $route(to, from) {
      // 對路由變化作出響應(yīng)...
    }
  }
}

或者使用 2.2 中引入的 beforeRouteUpdate 導(dǎo)航守衛(wèi)：

const User = {
  template: '...',
  beforeRouteUpdate(to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

二，params 傳參（不顯示參數(shù)）

1，使用不顯示參數(shù)的方式，則不需要在進行配置路由表：

  	{
        path: "routers",
        name: "Routers",
        component: () => import("../views/routers/routers.vue")
      },

2，開始跳轉(zhuǎn)并傳參

注意：需要指定路由表中的 name與之相對應(yīng)；

jumpTo() {
      this.$router.push({ name: "Routers", params:{ id:123 } });
    }

3，獲取參數(shù)

this.$route.params.id

注意：上述這種利用 params 不顯示 url 傳參的方式會導(dǎo)致在刷新頁面的時候，傳遞的值會丟失；需要謹慎使用。

三，query 傳參（顯示參數(shù)）

這種傳參方式會把你的參數(shù)以問號拼接到路由上面；刷新頁面且路由不會丟失。

1，這種也不需要進行配置路由表：

  	{
        path: "routers",
        name: "Routers",
        component: () => import("../views/routers/routers.vue")
      },

2，開始跳轉(zhuǎn)并傳參

注意：需要與路由表中的 path屬性 與之相對應(yīng)；

this.$router.push({ path:'/routers',  query:{	id:123 } })

3，獲取參數(shù)

this.$route.query.id

到此這篇關(guān)于vue Router(v3.x) 路由傳參的三種方式詳解的文章就介紹到這了,更多相關(guān)vue Router 路由傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論