vue ポップアップウィンドウを他の vue ページに埋め込む方法

記事ディレクトリ

例証する

[1] 実装方法、他のページをコンポーネントとして渡す
[2] 親ページでポップアップボックスにコンポーネントを導入し、動的レンダリングで切り替える

ここに画像の説明を挿入

サブコンポーネント、ポップアップフレームに導入されるページ

<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: "",
      // 查询参数
      queryParams: {
    
    
        userId: null,
        userName: null
      }
    };
  },
  created() {
    
    
    this.queryParams.userId = this.userId;
    this.getList();
  },
  methods: {
    
    
    getList() {
    
    
      this.loading = true;
      // 执行请求后台数据
    }
  }
};
</script>

[1] レイアウトフレームワークとして ElementUI を使用し、el-table テーブルとページネーションページングコンポーネントを使用する通常のページであるサブページを構築します [2] コンポーネントが作成されると、背景を要求し
ますデータをロードします。
[3] 親コンポーネントと子コンポーネントの間で値を渡すために使用される属性変数 props: ['userId'] を作成します。

親ページ

<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>
// 导入需要弹框展示页面的组件
import UserInfo from '../index/user'

export default {
    
    
  name: "父页面",
  // 注册组件
  components: {
    
    UserInfo},
  data() {
    
    
    return {
    
    
      // 需要和弹框页面交互的参数
      userId: null,
      // 控制弹框是否展示标识
      userDialogVisible: false
    };
  },
  created() {
    
    
    this.getList();
  },
  methods: {
    
    
    /** 展示用户列表页面 **/
    showUserInfoPage(row) {
    
    
      // 设置
      this.userDialogVisible = true;
      this.userId = row.id;
    },
    /** 关闭用户列表页面 **/
    cancel() {
    
    
      this.userDialogVisible = false;
    },
  }
};
</script>

親ページはポップアップフレームを使用し、コンポーネントを導入することでサブページをポップアップフレームにラップします。親コンポーネントと子コンポーネントの間でパラメータを渡すことで、データを切り替えます。サブコンポーネントが create() で動的にデータを表示できるようにするには、ここで v-if を使用する必要があることに注意してください。

考え

特定のパラメーターに従って他のコンポーネントデータを動的に表示する必要がある場合は、サブコンポーネントに他のパラメーターを渡すことで、サブコンポーネントウォッチでリッスンできます。サブコンポーネントを介してパラメータ変数の変更を監視し、データを動的に展開および切り替えます。
サブコンポーネントのレンダリングは、作成されたライフサイクルを 1 回だけ実行することに注意してください。

コンポーネント v-if と v-show が切り替えられたときのライフサイクルフックの実行

v-if
初始渲染
初始值为 false 组件不会渲染，生命周期钩子不会执行，v-if 的渲染是惰性的。
初始值为 true 时，组件会进行渲染，并依次执行 beforeCreate,created,beforeMount,mounted 钩子。

切换
false => true
依次执行 beforeCreate,created,beforeMount,mounted 钩子。
true => false
依次执行 beforeDestroy,destroyed 钩子。

v-show
渲染
无论初始状态，组件都会渲染，依次执行 beforeCreate,created,beforeMount,mounted 钩子，v-show 的渲染是非惰性的。

切换
对生命周期钩子无影响，切换时组件始终保持在 mounted 钩子```