vue彈窗嵌入其它vue頁面的操作代碼

更新時(shí)間：2022年11月14日 17:08:14 作者：ZWZhangYu

這篇文章主要介紹了vue彈窗如何嵌入其它vue頁面,實(shí)現(xiàn)方式是將其他頁面作為組件傳入，在父頁面將該組件引入到彈框內(nèi)，實(shí)例代碼簡(jiǎn)單易懂需要的朋友可以參考下

說明

【1】實(shí)現(xiàn)方式，將其他頁面作為組件傳入
【2】在父頁面，將該組件引入到彈框內(nèi)，并通過動(dòng)態(tài)渲染進(jìn)行切換

在這里插入圖片描述

子組件，將要引入到彈框內(nèi)的頁面

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
    </el-form>
    <el-table v-loading="loading" :data="recordList" @selection-change="handleSelectionChange">
    </el-table>
    <pagination/>
  </div>
</template>
<script>
export default {
  name: "Record",
  props: ['userId'],
  data() {
    return {
      // 遮罩層
      loading: true,
      title: "",
      // 查詢參數(shù)
      queryParams: {
        userId: null,
        userName: null
      }
    };
  },
  created() {
    this.queryParams.userId = this.userId;
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      // 執(zhí)行請(qǐng)求后臺(tái)數(shù)據(jù)
    }
  }
};
</script>

【1】構(gòu)建子頁面，上面是一個(gè)普通的頁面，其中頁面使用ElementUI作為布局框架，使用到了el-table表格和pagination分頁組件
【2】組件創(chuàng)建即created的時(shí)候，請(qǐng)求后臺(tái)加載數(shù)據(jù)。
【3】創(chuàng)建屬性變量props: [‘userId’]，該參數(shù)用于父子組件傳值。

父頁面

<template>
  <div class="app-container">
    <el-dialog :title="title" :visible.sync="userDialogVisible"  v-if="userDialogVisible"  width="800px" append-to-body>
      <!--  傳遞給子組件的值     -->
      <UserInfo :userId="userId"></UserInfo>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 導(dǎo)入需要彈框展示頁面的組件
import UserInfo from '../index/user'

export default {
  name: "父頁面",
  // 注冊(cè)組件
  components: {UserInfo},
  data() {
    return {
      // 需要和彈框頁面交互的參數(shù)
      userId: null,
      // 控制彈框是否展示標(biāo)識(shí)
      userDialogVisible: false
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 展示用戶列表頁面 **/
    showUserInfoPage(row) {
      // 設(shè)置
      this.userDialogVisible = true;
      this.userId = row.id;
    },
    /** 關(guān)閉用戶列表頁面 **/
    cancel() {
      this.userDialogVisible = false;
    },
  }
};
</script>

父頁面通過彈框并將子頁面通過引入組件的方式包裹在彈框內(nèi)，通過:visible.sync=“userDialogVisible” v-if="userDialogVisible"進(jìn)行彈框的展示以及組件的創(chuàng)建和銷毀，并且通過父子組件傳參的方式切換數(shù)據(jù)。注意這里需要使用v-if以便子組件可以在create()中動(dòng)態(tài)展示數(shù)據(jù)。

思考

對(duì)于類似需要根據(jù)特定參數(shù)動(dòng)態(tài)展示其他組件數(shù)據(jù)的時(shí)候，我們可以通過在可以給子組件傳遞其他參數(shù)，在子組件watch中監(jiān)聽。通過子組件監(jiān)聽參數(shù)變量變化從而動(dòng)態(tài)展切換數(shù)據(jù)。
注意子組件渲染只會(huì)執(zhí)行一次created生命周期，如果非要將更改內(nèi)容寫在created中，就要配合 v-if 使用，將子組件用 v-if 包裹起來，每次都重新加載子組件。

組件 v-if 和 v-show 切換時(shí)生命周期鉤子的執(zhí)行

v-if
初始渲染
初始值為 false 組件不會(huì)渲染，生命周期鉤子不會(huì)執(zhí)行，v-if 的渲染是惰性的。
初始值為 true 時(shí)，組件會(huì)進(jìn)行渲染，并依次執(zhí)行 beforeCreate,created,beforeMount,mounted 鉤子。

切換
false => true
依次執(zhí)行 beforeCreate,created,beforeMount,mounted 鉤子。
true => false
依次執(zhí)行 beforeDestroy,destroyed 鉤子。

v-show
渲染
無論初始狀態(tài)，組件都會(huì)渲染，依次執(zhí)行 beforeCreate,created,beforeMount,mounted 鉤子，v-show 的渲染是非惰性的。

切換
對(duì)生命周期鉤子無影響，切換時(shí)組件始終保持在 mounted 鉤子```

到此這篇關(guān)于vue彈窗如何嵌入其它vue頁面的文章就介紹到這了,更多相關(guān)vue彈窗嵌入其它vue頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: