当前位置: 首页 > 知识库问答 >
问题:

javascript - 有三个页面分别为A、B、C,关系如下:C是B的子组件,B是A通过uni.navgateTo跳转过去的,需求代码如下?

卜泓
2023-07-14

这个是C组件

<template>    <view>        <view class="tree">            <!-- 部门节点 -->            <view class="" v-if="resData.depts && resData.depts.length">                <view class="depts" v-for="(dept,index) in resData.depts" :key="'depts'+index">                    <view class="depts_content" @click="depts_click(dept)">                        <view class="depts_content_left">                            <view class="depts_icon">                                <image class="img_icon" :src="getIcon(dept.deptType)"></image>                            </view>                            <view class="depts_name">                                {{dept.deptName}}                            </view>                            <view class="depts_label">                                <text>{{ getLabel(dept.deptType) }}</text>                            </view>                        </view>                        <view class="depts_content_right">                            <view class="depts_arrow_icon">                                <image :class="['arrow_icon', {'downIcon': !dept.is_open, 'upIcon': dept.is_open}]"                                    :src="arrowIcon" v-show="!!(dept.subUsers + dept.subDepts) && dept.show_loading" />                                <u-loading-icon size="20" :show="dept.is_loading"></u-loading-icon>                            </view>                        </view>                    </view>                    <!-- 递归渲染的节点 -->                    <view>                        <template v-if="dept.children && dept.is_open">                            <tree class="depts_children" :resData="dept.children"></tree>                        </template>                    </view>                </view>            </view>            <!-- 用户节点 -->            <view class="" v-if="resData.users && resData.users.length">                <view class="users" v-for="(user,index) in resData.users" :key="'users'+index">                    <view class="users_content" @click="users_click(user)">                        <view class="users_content_left">                            <!-- <label for="">                                <radio :checked="user.is_checked"></radio>                            </label> -->                            <checkbox-group>                                <label>                                    <checkbox :checked="user.is_checked" />                                </label>                            </checkbox-group>                            <view class="users_icon">                                <image class="img_icon" :src="userIcon"></image>                            </view>                            <view class="users_name">                                {{user.trueName}}                            </view>                            <view class="users_label">                                <text>成员</text>                            </view>                        </view>                    </view>                </view>            </view>        </view>    </view></template>

这个是B组件

<view class="header_box">                <view class="header_box">                    <image class="header_img" :src="backIcon" mode="" @click="backClick"></image>                    <text class="header_title">人员选择</text>                </view>                <view class="main_content">                    <u-loading-page :loading="is_loading"></u-loading-page>                    <tree class="tree" ref="tree" :selectType="selectType" :resData="resData" @handleSelect="getHeadSelectUset">                    </tree>                </view>                <view class="submit_btn_box" @click="submit_btn">                    <u-button text="确定" color="#445cf4"></u-button>                </view>            </view>

这个是A组件

<view class="card">            <view class="card_top" @click="selectPeople(1)">                <text class="card_top_title">抄送部门负责人:</text>                <view class="card_top_right">                    <text class="right_text">{{head == ""? "请选择" : head}}</text>                    <image class="right_icon" :src="rightIcon" mode=""></image>                </view>            </view>        </view>        <view class="card">            <view class="card_top" @click="selectPeople(2)">                <text class="card_top_title">抄送安全员:</text>                <view class="card_top_right">                    <text class="right_text">{{safety == ""? "请选择" : safety}}</text>                    <image class="right_icon" :src="rightIcon" mode=""></image>                </view>            </view>        </view>

A页面通过点击selectPeople这个方法,实现跳转到B页面,然后在B页面中有两个方法分别是submit_btn和backClick事件,这两个事件都是通过调用uni.navgateBack()返回A页面,在B页面中调用C组件,渲染的是一个树形控件,其中C组件的用户节点是动态渲染的,是部门节点通过点击depts_click事件,才会渲染出来.

实现需求: 用户节点通过点击user_click事件,会对当前的用户改为选中状态,此时会将user数据,传递给A页面,但是当在B页面触发了backClick事件,此时就不让user数据传递给A组件,假如先将用户改为选中状态,再改为取消选中的状态,此时在B页面触发submit_btn事件时,也不要将user数据传递给A页面,因为A页面会进行两次这个操作,所以不要互相影响。

已实现的方法: 采用了事件总线的方法,但是代码写的有点丑,所以想要一个优雅的写法

共有2个答案

冯淳
2023-07-14

C选择人员后,直接通过修改页面的方式把选中的人员数据给B,B同理给A
通过getCurrentPages获取具体的页面,.$vm获取页面实例,然后就改数据

扶高歌
2023-07-14

用Vuex来实现会更优雅一点:

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({  state: {    selectedUser: null  },  mutations: {    selectUser (state, user) {      state.selectedUser = user    },    resetUser (state) {      state.selectedUser = null    }  },  getters: {    selectedUser: state => state.selectedUser  }})

在C组件中:

methods: {  user_click(user) {    this.$store.commit('selectUser', user)  }}

在B组件中:

methods: {  backClick() {    this.$store.commit('resetUser')  },  submit_btn() {    let user = this.$store.getters.selectedUser    if (user) {      // 把user数据传给A页面    }  }}

在A组件中:

computed: {  selectedUser() {    return this.$store.getters.selectedUser  }}
 类似资料:
  • 问题内容: 我尝试了一些代码,使用XOR在Java中交换两个整数而不使用第三个变量。 这是我尝试的两个交换函数: 这段代码产生的输出是这样的: 我很好奇,为什么这样说: 与这个不同吗? 问题答案: 问题是评估的顺序: 参见JLS第15.26.2节 首先,对左操作数求值以产生一个变量。 如果该评估突然完成,则赋值表达式由于相同的原因而突然完成;右边的操作数不会被评估,并且不会发生赋值。 否则,将保存

  • 我有两个双向量。双的值在-1000到1000之间。 两个向量包含相同的数字,但顺序不同。 例如 假设通过以下方式求和,是否可以保证向量1的和与向量2的和完全相等: 我担心双重不精确。

  • 本文向大家介绍计算三元组(a,b,c)的数量,以使C ++中a ^ 2 + b ^ 2 = c ^ 2和1 <= a <= b <= c <= n,包括了计算三元组(a,b,c)的数量,以使C ++中a ^ 2 + b ^ 2 = c ^ 2和1 <= a <= b <= c <= n的使用技巧和注意事项,需要的朋友参考一下 我们得到一个整数n。目标是找到满足条件的三元组(3个数字一组)- a 2

  • 我尝试了一些代码在Java中交换两个整数,而不使用第三个变量,即使用XOR。 以下是我尝试的两个交换函数: 该代码产生的输出如下: 我很想知道,为什么会有这样的说法: 和这个不一样?

  • 问题内容: 这是我的第一个问题,我开始学习Python。之间有什么区别: 和 在下面的示例中编写时,它显示不同的结果。 和 问题答案: 在中,在将右侧的表达式赋给左侧之前对其求值。因此,它等效于: 在第二个示例中,运行时已更改的值。因此,结果是不同的。

  • 题目描述 这是今晚阿里巴巴笔试编程题的其中一道。原题描述如下: 对于任何整数 $x$,一定存在整数对 $(a, b)$,使得 $x \oplus a \oplus b$ 最大。其中,$\oplus$ 表示异或,$0≤x,a,b≤2^{31}-1$。给定一个 $x$,输出使得 $\vert a-b\vert $ 最小的 $(a, b)$ 对的个数。 示例: 输入 0,输出 2 输入 100,输出 1