vue通過js代碼實例化組件

来源:https://www.cnblogs.com/JayLily/archive/2023/09/16/17706105.html
-Advertisement-
Play Games

最近在寫項目的一些公共組件(一些選擇器),很多個地方都需要用,所以在main.js全局聲明瞭,但發現子頁面調用還是有挺多的地方需寫。 例如,要在template實例化組件,並用ref綁定,然後在js里的methods里寫方法。 main.js 聲明全局組件 第一種方案 一開始想到的是用ref綁定組件 ...


最近在寫項目的一些公共組件(一些選擇器),很多個地方都需要用,所以在main.js全局聲明瞭,但發現子頁面調用還是有挺多的地方需寫。

例如,要在template實例化組件,並用ref綁定,然後在js里的methods里寫方法。

main.js 聲明全局組件

第一種方案

一開始想到的是用ref綁定組件,業務組件實例化公共組件,並賦予ref,然後通過這個ref綁定,直接調用公共組件的方法(為了一定能觸發方法),例如  this.$refs.xxx.open()

如果用戶在公共組件中,選擇好數據操作完成後,公共組件觸發emit方法,通過回調方法的方式通知業務組件,例如 this.$emit("getTableSelect",this.selection)

以下是相關代碼:

公共組件

<template>
  <div>
    <el-dialog
      v-loading="loading"
      :before-close="cancel"
      :close-on-click-modal="false"
      :element-loading-text="loadingText"
      :visible="dialogVisible"
      append-to-body
      title="科目選擇器"
      width="80%"
    >
      <el-form
        ref="queryForm"
        :inline="true"
        :model="queryParams"
        label-width="68px"
        size="small"
      >
        <el-form-item label="名稱" prop="name">
          <el-input
            v-model="queryParams.name"
            clearable
            placeholder="請輸入名稱"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="狀態" prop="status">
          <el-select
            v-model="queryParams.status"
            clearable
            placeholder="請選擇狀態"
          >
            <el-option
              v-for="dict in dict.type.sys_normal_disable"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            icon="el-icon-search"
            size="mini"
            type="primary"
            @click="handleQuery"
            >搜索
          </el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="dataList"
        @row-dblclick="rowDblclick"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="55" />
        <el-table-column align="center" label="科目id" prop="subjectId" />
        <el-table-column align="center" label="名稱" prop="name" />
        <el-table-column align="center" label="介紹" prop="intro" />
        <el-table-column align="center" label="排序" prop="sort" />
        <el-table-column align="center" label="狀態" prop="status">
          <template slot-scope="scope">
            <dict-tag
              :options="dict.type.sys_normal_disable"
              :value="scope.row.status"
            />
          </template>
        </el-table-column>
        <el-table-column align="center" label="備註" prop="remark" />
      </el-table>
      <div slot="footer" style="text-align: center">
        <el-button type="primary" @click="submitForm">確 定</el-button>
        <el-button @click="cancel">關閉</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listSubject } from "@/api/as/subject";

export default {
  name: "TableSelect",
  dicts: ["sys_normal_disable"],
  data() {
    return {
      loading: false,
      loadingText: "數據正在處理中...",
      dialogVisible: false,
      // 查詢參數
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: null,
        status: null,
      },
      // 總條數
      total: 0,
      //表格數據
      dataList: [],
      //被選擇的行
      selection: [],
    };
  },

  methods: {
    /**
     * 打開視窗
     */
    open(name) {
      this.dialogVisible = true;
      this.queryParams.name = name;
      this.handleQuery();
    },
    /** 搜索按鈕操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 查詢科目列表 */
    getList() {
      this.loading = true;
      listSubject(this.queryParams).then((response) => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    //取消
    cancel() {
      this.dialogVisible = false;
      this.reset();
    },
    //確定
    submitForm(row) {
      if (row) {
        this.$emit("getTableSelect", row);
      } else if (this.selection.length > 0) {
        this.$emit("getTableSelect", this.selection);
      } else {
        this.$message.warning("請選擇");
        return;
      }

      this.dialogVisible = false;
      this.reset();
    },
    //重置信息
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        name: null,
        status: null,
      };
      this.dataList = [];
      this.selection = [];
    },
    //表格選擇改變
    handleSelectionChange(selection) {
      this.selection = selection;
    },
    //雙擊
    rowDblclick(row) {
      this.submitForm(row);
    },
  },
};
</script>
<style lang="scss" scoped></style>

業務組件(簡化)

<template>
  <div class="app-container">
    <el-input
      v-model="queryParams.name"
      clearable
      placeholder="回車搜索科目"
      @keyup.enter.native="handleTableSelect"
    />
    <table-select ref="tableSelect" @getTableSelect="getTableSelect" />
  </div>
</template>

<script>
export default {
  name: "Chapter",

  data() {
    return {
      // 遮罩層
      loading: true,
      // 查詢參數
      queryParams: {
        name: null,
      },
    };
  },

  methods: {
    //去打開視窗選擇
    handleTableSelect() {
      this.$refs.tableSelect.open(this.queryParams.name);
    },
    //獲取選擇的行
    getTableSelect(row) {
      this.queryParams.name = row.name;
    },
  },
};
</script>

效果圖

 

 

 

第一種方案,雖然可以使用,但業務組件若要使用,則需要正確在4個地方寫上對應的代碼

即,1.實例化公共組件,並寫上ref和getTableSelect的事件監聽,2.輸入框寫上回車事件,3.回車事件里觸發公共組件的方法,4.寫getTableSelect事件監聽的方法。

 

若別的小伙伴一不小心,忘記了其中一個地方(大多數都是實例化組件,或者沒寫getTableSelect事件監聽的方法,我們程式員,ctrl+c,ctrl+v,漏拷貝一點點方法,很正常吧),則會需排查原因,相對繁瑣。

後面我想了一下,再通過百度,寫了第二種方案。

第二種方案

為了減少出現拷貝少問題,我把第3步和第4步合併了(3.回車事件里觸發公共組件的方法,4.寫getTableSelect事件監聽的方法),用Promise。

以下是相關的改動

公共組件改動情況

 

 業務組件改動情況

 

 這樣做了之後,好處就是,觸發的事件和接收結果的方法在一起了,減少出錯的概率,代碼也更加方便理解了。第二種方案,也是我一直用的方案,

但第二種方案,依舊要寫3個地方,即1.實例化公共組件,並寫上ref,2.輸入框寫上回車事件,3.回車事件里觸發公共組件的方法並接收值,

這種情況下,還是有小伙伴會出現拷貝少的問題(沒有實例化公共組件),我也曾想過,怎麼去除這個實例化的代碼,用js代碼實例化組件,但受限於個人水平不夠,我也沒想到什麼好的方法解決這個問題,所以這個問題就一直擱置了。

直到今天(2023-9-16),我心血來潮,想看看有沒有辦法解決沒有實例化公共組件問題,經過長時間的百度,和查看vue官方文檔,終於找到了一種可以在js代碼上實例化組件的方案,也就是現在的第三種方案。

第三種方案

公共組件沒有任何改變

新增一個公共的js方法

import Vue from "vue";

/**
 * 獲取表格選擇
 * @param name 搜索值
 */
export function getTableSelect(name) {
  //獲取公共里的實例
  const MyComponent = Vue.component("TableSelect");
  let myComponent = new MyComponent();
  //掛載實例
  let jbxxModal = myComponent.$mount();

  return new Promise((resolve, reject) => {
    jbxxModal
      .open(name)
      .then((row) => {
        resolve(row);
      })
      .catch((res) => {
        reject(res);
      })
      .finally(() => {
        //銷毀實例
        myComponent.$destroy();
      });
  });
}

 

main.js,新增以下代碼

 業務組件改動情況

 通過第三種方案,別的小伙伴只需要調用公共的js方法即可,不需要實例化了組件了,大大的減少了出錯的概率了,

現在只需要1.輸入框寫上回車事件,2.回車事件里觸發公共組件的方法並接收值。

通過這次學習,提升了個人的一丟丟前端知識,記錄存檔,方便以後還知道怎麼解決這個問題,也方便給別的小伙伴一些參考,

若該文章幫助到了你,請幫忙點一下贊好嗎,若有更好的方案,可以評論告訴我,讓我也學習一下。


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本章節主要討論瞭如何通過零拷貝技術來優化文件傳輸的性能。零拷貝技術主要通過減少用戶態和內核態之間的上下文切換次數和數據拷貝次數來提高性能。具體來說,介紹了兩種實現零拷貝的方式:mmap + write和sendfile。使用mmap + write可以減少一次數據拷貝過程,而使用sendfile系統... ...
  • 第1個虛擬項目 1. 前言 點燈開啟了我們的FPGA之路,那麼我們來繼續沙盤演練。 用一個虛擬項目,來入門練習,以此步入數字邏輯的大門。 Key Words:FIFO 、SOF 、EOF、計數器、緩存、時序圖、方案設計 2. 項目要求 1) 輸入報文長度64~2048位元組; 2) 輸入報文之間最小間 ...
  • 本文將從 e2e 的基本介紹,e2e 的使用與擴展,session 日誌隔離三個維度為大家帶來 ChunJun e2e & session 日誌隔離的分享。 大量具體代碼和演示請看視頻教程⬇️ 視頻課程: https://www.bilibili.com/video/BV1ru411P7oZ/?sp ...
  • 一、升級路線 10.2.0.5,11.1.0.7,11.2.0.2以上版本可以直接升級到12c。 10.2.0.5以前的版本和11.2.0.1版需要先升級到中間版本,再升級到12c。 二、環境說明 操作系統:Red Hat 8 Linux 64位 源資料庫版本:Oracle 11.2.0.3 目標數 ...
  • NineData SQL開發企業版是一款強大的資料庫管理工具,旨在解決企業在資料庫管理方面所面臨的各種挑戰。該工具提供了一整套企業級能力,包括團隊協作、許可權管控、審計日誌、SSO單點登錄等功能。它還提供超過100條SQL規範審核,幫助企業規範使用和變更資料庫。通過該工具,用戶可以簡化繁瑣的資料庫管理... ...
  • 簡述 SAP HANA 是由 SAP 開發的一款記憶體列式資料庫, 具有預測分析、空間數據處理、文本分析、文本搜索、流分析、圖形數據處理等高級分析功能。 HANA 記憶體列式資料庫特性,即啟動後可以把所有數據載入記憶體,相比傳統基於硬碟的資料庫,性能提升10~10,000倍。 HANA 一般內置在 SAP ...
  • 首先,先搞明白一個概念,這裡的 Java 混合 Kotlin 是指文件層級的混合,即 Java 代碼還是寫在 .java 文件中,Kotlin 代碼還是寫在 .kt 文件中,只不過是可以在 Java 的代碼中可以調用自己寫好的 Kotlin 類,從 Java 的角度看,它並不知道它調用的這個類是 K ...
  • 目錄前言一、監聽UITextField 內容變化1. 代理2. 通知3. 目標動作事件二、監聽UITextView文本內容高度變化三、cell中的文本框,在reloadData or reloadRow後失去焦點四、手機號碼、銀行卡號格式化 前言 本文總結了在使用 UITextField & UIT ...
一周排行
    -Advertisement-
    Play Games
  • 一個自定義WPF窗體的解決方案,借鑒了呂毅老師的WPF製作高性能的透明背景的異形視窗一文,併在此基礎上增加了滑鼠穿透的功能。可以使得透明窗體的滑鼠事件穿透到下層,在下層窗體中響應。 ...
  • 在C#中使用RabbitMQ做個簡單的發送郵件小項目 前言 好久沒有做項目了,這次做一個發送郵件的小項目。發郵件是一個比較耗時的操作,之前在我的個人博客裡面回覆評論和友鏈申請是會通過發送郵件來通知對方的,不過當時只是簡單的進行了非同步操作。 那麼這次來使用RabbitMQ去統一發送郵件,我的想法是通過 ...
  • 當你使用Edge等瀏覽器或系統軟體播放媒體時,Windows控制中心就會出現相應的媒體信息以及控制播放的功能,如圖。 SMTC (SystemMediaTransportControls) 是一個Windows App SDK (舊為UWP) 中提供的一個API,用於與系統媒體交互。接入SMTC的好 ...
  • 最近在微軟商店,官方上架了新款Win11風格的WPF版UI框架【WPF Gallery Preview 1.0.0.0】,這款應用引入了前沿的Fluent Design UI設計,為用戶帶來全新的視覺體驗。 ...
  • 1.簡單使用實例 1.1 添加log4net.dll的引用。 在NuGet程式包中搜索log4net並添加,此次我所用版本為2.0.17。如下圖: 1.2 添加配置文件 右鍵項目,添加新建項,搜索選擇應用程式配置文件,命名為log4net.config,步驟如下圖: 1.2.1 log4net.co ...
  • 之前也分享過 Swashbuckle.AspNetCore 的使用,不過版本比較老了,本次演示用的示例版本為 .net core 8.0,從安裝使用開始,到根據命名空間分組顯示,十分的有用 ...
  • 在 Visual Studio 中,至少可以創建三種不同類型的類庫: 類庫(.NET Framework) 類庫(.NET 標準) 類庫 (.NET Core) 雖然第一種是我們多年來一直在使用的,但一直感到困惑的一個主要問題是何時使用 .NET Standard 和 .NET Core 類庫類型。 ...
  • WPF的按鈕提供了Template模板,可以通過修改Template模板中的內容對按鈕的樣式進行自定義。結合資源字典,可以將自定義資源在xaml視窗、自定義控制項或者整個App當中調用 ...
  • 實現了一個支持長短按得按鈕組件,單擊可以觸發Click事件,長按可以觸發LongPressed事件,長按鬆開時觸發LongClick事件。還可以和自定義外觀相結合,實現自定義的按鈕外形。 ...
  • 一、WTM是什麼 WalkingTec.Mvvm框架(簡稱WTM)最早開發與2013年,基於Asp.net MVC3 和 最早的Entity Framework, 當初主要是為瞭解決公司內部開發效率低,代碼風格不統一的問題。2017年9月,將代碼移植到了.Net Core上,併進行了深度優化和重構, ...