Vue3/pinia/父传子

最新推荐文章于 2024-07-12 16:27:40 发布

-Max1st

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量180

点赞数 8

分类专栏： pina Vue3 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_50187801/article/details/138193148

版权

pina 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

store 文件中定义了一个名为 useCounterStore 的函数，该函数使用 defineStore 函数来创建一个 store 对象。

useCounterStore 函数的参数是一个对象，包含以下属性：

state：用于定义 store 中的状态。在这个对象中，有一个名为 showGroupDetail 的属性，它是一个布尔值，表示当前组件是否显示组详细信息。
persist：用于指定 store 中的状态是否应该在组件挂载和卸载时保持不变。在这个对象中，persist 属性被设置为 {}，表示所有状态都应该是持久的。
getters：用于定义 store 中的 getter 函数。在这个对象中，没有定义任何 getter 函数。
actions：用于定义 store 中的操作。在这个对象中，有一个名为 changeGroupDetail 的函数，该函数接受一个参数 val，并调用 this.showGroupDetail 设置为 val。

import {
    ref
} from 'vue'
import {
    defineStore
} from 'pinia';
export const useCounterStore = defineStore('counter',
    {
        state: () => {
            return {
                showGroupDetail: false, // 设置是否显示集团详情
            };
        },
        persist: {},
        getters: {},
        actions: {
            changeGroupDetail(val) {
                this.showGroupDetail = val; // 通过该方法来更改是否显示
            },
    }
})

父组件

<template>
  <div v-if="!showGroupDetail">
    <div class="box_outter">
      <div class="box_title flexBox">
        <div>
          <div class="box_title_icon"></div>
          <div class="box_title_text m-r-40">集团关系查询</div>
        </div>

        <div class="flexBox m-t-10">
          <div class="clickBtn flexBox" @click="goGroupShipConfirm">
            <el-icon><Collection /></el-icon>
            <p class="clickWord">发起认定</p>
          </div>

          <div class="clickBtn m-l-20 flexBox" @click="goGroupImport">
            <el-icon><DocumentAdd /></el-icon>
            <p class="clickWord">集团导入</p>
          </div>
        </div>
      </div>
      <div class="content_box">
        <div class="flex">
          <div class="w_25">
            <div class="screen-title">集团名称</div>
            <el-input
              class="searchInt"
              v-model="form.stockName"
              placeholder="请输入集团名称关键字"
            ></el-input>
          </div>
          <div class="w_25">
            <div class="screen-title">企业名称</div>
            <el-input
              class="searchInt"
              v-model="form.stockCode"
              placeholder="请输入企业名称关键字"
            ></el-input>
          </div>
          <div class="w_25">
            <div class="screen-title">所属机构</div>
            <el-select class="searchInt" v-model="form.market">
              <el-option
                v-for="item in institutionOptions"
                :key="item"
                :label="item.abbreviation"
                :value="item.sinfoExchmarket"
              />
            </el-select>
          </div>
        </div>
      </div>
      <div class="box_bottom">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button class="refreshBtn" @click="refresh">重置</el-button>
      </div>
    </div>
    <div class="box_outter m-t-25">
      <div class="box_title">
        <div class="box_title_icon"></div>
        <div class="box_title_text m-r-40">查询结果</div>
        <el-button class="screen_top_btn" type="primary" @click="exportData"
          >导出数据</el-button
        >
      </div>
      <div class="content_box">
        <div class="tip_outter">
          <el-icon class="dis_inline" color="#de6427" size="20"><InfoFilled /></el-icon>
          <span class="dis_inline"> 共搜索到 {{ total }}个集团，{{ total }}个主体</span>
        </div>
        <el-table :data="tableData" class="normal-table" border style="width: 100%">
          <el-table-column align="center" type="selection"> </el-table-column>
          <el-table-column prop="sinfoWindcode" align="center" label="序号">
          </el-table-column>
          <el-table-column prop="binfoFullname" align="center" label="集团名称">
            <!-- <template #default="scope">
              <div class="text-c1 cus" @click="gotoDetails(scope.row)">
                {{ scope.row.binfoFullname }}
              </div>
            </template> -->
          </el-table-column>
          <el-table-column prop="sinfoName" align="center" label="企业名称" />
          <el-table-column prop="binfoIssuer" align="center" label="成员层级" />
          <el-table-column prop="sinfoExchmarket" align="center" label="所属机构" />
          <el-table-column prop="sinfoIndustryname2" align="center" label="发起人">
          </el-table-column>
          <el-table-column prop="binfoCreditrating" align="center" label="创建时间">
          </el-table-column>
          <el-table-column label="操作" width="" align="center">
            <template #default="scope">
              <el-col :span="20">
                  <el-link :underline="false"
                    @click="goGroupDetail(scope.row)" class="normal-link-n1 m-r-10">集团明细</el-link>
                </el-col>
            </template>
          </el-table-column>
        </el-table>
        <el-row class="m-t-15">
          <el-col :span="12" class="l-h-30"> </el-col>
          <el-col :span="12" class="t_right">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20, 50]"
              :page-size="pageSize"
              layout=" prev, pager, next, sizes,jumper"
              :total="total"
            >
            </el-pagination>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>

// 在子组件上绑定上父组件要传给他的值
  <div v-if="showGroupDetail">
    <groupDetail :groupInfo="groupInfo" />
  </div>
</template>


<script setup>
import { useCounterStore } from "@/stores/counter"; // 引入了useCounterStore函数，用于创建一个计数器存储器
const store = useCounterStore(); 
import { storeToRefs } from "pinia"; // 从pinia库中导入storeToRefs函数，该函数用于将存储器转换为可访问的属性
const { showGroupDetail } = storeToRefs(store); // 引入Store中的showGroupDetail属性 并赋值给上述模板中用来控制显示隐藏
const groupDetail = defineAsyncComponent(() => import("../../components/groupRelationship/groupDetail.vue"));  在父组件中引入子组件

const groupInfo = ref({}) // 集团详情信息(父组件要传递给组件的内容)
const goGroupDetail = (e) => {
  store.changeGroupDetail(true) // 更改Store中状态的值（用于解锁显示子组件）
  groupInfo.value = e // 将点击事件的值全部赋值给要传递给子组件的值
};


<script>

子组件

<template>
  <div class="box_outter">
    <div class="box_title flexBox">
      <div class="flexBox">
        <div>
          <div class="box_title_icon"></div>
          <!-- 回显父组件传过来的内容 -->
          <div class="box_title_text m-r-40">{{ mainInfo.groupInfo.binfoFullname }}</div>
        </div>
        <div class="childrenGroup">下辖子公司明细</div>
        <div class="clickBtn m-l-20" @click="backGroupQuery">
          <el-icon><Back /></el-icon>
          返回
        </div>
      </div>
    </div>
  </div>
  </div>
</template>

<script setup>
import { useCounterStore } from "@/stores/counter";
const store = useCounterStore();
import { storeToRefs } from "pinia";
const { showGroupDetail } = storeToRefs(store);
const backGroupQuery = () => {
  store.changeGroupDetail(false) // 修改Store的值（让其回显父组件）
};

// 用来接收父组件传过来的内容
const mainInfo = defineProps({
    groupInfo: {
        type: String,
    }
})
</script>

<style scoped>
.searchInt {
  width: calc(100% - 110px);
}
.tip_outter {
  padding: 10px 20px;
  background-color: #e6f3fc;
  border-radius: 5px;
  margin-bottom: 20px;
}

.flexBox {
  display: flex;
  justify-content: space-between;
}

.clickBtn {
  color: #de6427;
  font-size: 16px;
  margin-left: 3px;
  cursor: pointer;
}

.m-l-20 {
  margin-left: 20px;
}

.clickWord {
  margin-top: -3px;
  margin-left: 3px;
}

.childrenGroup{
  font-size: 14px;
  margin-top: 20px;
  margin-right: 20px;
}
</style>