weixin_41359495
H_Franky
采纳率23.3%
2020-12-17 22:27

vue子组件如何动态传数据给父组件?

5

红框为子组件,点击左边的+选到右边,右边也可以点x删除掉,左边数据来自父组件调用的接口,点+push到右边一个的数组,同时隐藏左边对应的项,点x删除右边的数组对应的项,同时左边对应项显示回来。

现在保存按钮在父组件,怎么把子组件右边已选的项动态传递给父组件?问题出在了父组件拿不到最终的项,虽然可以一项一项的传递过去,但是点x后就删除了,此时父组件里这项还在,如何实现两边同步?

<template>
    <div>
        <div>
            <div>
                <div>
                    <div@click="switchLeft">
                        <span :class="[tabType == 1 ? 'selected-tab' : '']">{{ leftTabName }}</span>
                    </div>
                    <div@click="switchRight">
                        <span :class="[tabType == 2 ? 'selected-tab' : '']">{{ rightTabName }}</span>
                    </div>
                </div>
                <input type="text" />
                <div>
                    <div v-for="(item,index) in stationList" :key="index">
                        <div v-if="item.isshow">
                            <div>{{ item.name }}</div>
                            <div><img src="../image/addicon.png" @click="selectedStation(item)"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>已选站点</div>
                <div>
                    <div v-for="(item,index) in selectedList" :key="index">
                        <div>{{ item.name }}</div>
                        <div><img src="../image/delete.png" @click="deleteStation(item,index)"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "SelectStation",
    props: {
        // 左边选项
        leftTabName: {
            type: String,
            default: "左边"
        },
        // 右边选项
        rightTabName: {
            type: String,
            default: "右边"
        },
        // 站点
        stationList: {
            type: Array,
        }
    },
    data() {
        return {
            tabType: 1, 
            isHover: false,
            stationName: "",
            selectedList: [], // 已选的
        }
    },
    mounted() {
        this.stationList.forEach((item, index) => {
            item.location = index
            item.isshow = true
            this.stationList.push(item)
        })
        
    },
    methods: {
        switchLeft() {
            this.tabType = 1;
        },
        switchRight() {
            this.tabType = 2;
        },
        selectedStation(item) {
            item.isshow = false;
            this.selectedList.push(item);
        },
        deleteStation(item, index) {
            this.stationList.forEach(station => {
                if (item.id == station.id) {
                    station.isshow = true;
                }
            });
            this.selectedList.splice(index, 1);
        }
    },
}
</script>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

8条回答

  • m0_46529579 我的中二病又犯了 4月前

    这样可以的,不过既然用了.sync修饰符 就没必要赋值新数组分两个监听了,你试试这样改是否可行

    selectedList(newVal, oldVal) {
    
    if(JSON.stringify(newVal) !== JSON.stringify(oldVal))
    this.$emit("update:selectedList", newVal);
    
    },
    点赞 评论 复制链接分享
  • m0_46529579 我的中二病又犯了 4月前

    你这个的话 我给你两个建议:
    1、方法一:如果是在父组件点击保存按钮的时候去拿子组件的已选中数据,可以用ref方式;即在父组件调用子组件的标签行内添加属性 ref=“items”,然后点击保存的时候,通过this.$refs.items.selectedList获取数据
    2、方法二:就是监听子组件selectedList的数据变化,当数据变化时,通过this.$emit('父组件定义的@方法名称',selectedList)来处理也行,这样就相当于每次添加删除父组件都会被动处理。


    如果只是点击保存的时候获取到数据,个人建议用方法一比较合理些。

    点赞 1 评论 复制链接分享
  • weixin_41359495 H_Franky 4月前

    也可以,哈哈,我有时候写代码不够简化

    点赞 评论 复制链接分享
  • weixin_41359495 H_Franky 4月前

    父组件这边:selectedList.sync="selectedList",selectedList也是从父组件传过去的

    子组件

    // 已选的

            selectedList: {

                type: Array

            }

    点赞 评论 复制链接分享
  • weixin_41359495 H_Franky 4月前

    @我的中二病又犯了

    点赞 评论 复制链接分享
  • weixin_41359495 H_Franky 4月前

    我加了监听,因为除了创建还有编辑,即后端返回已选数据,我还要显示上去,现在还未接接口,只是假数据可行,不知真数据怎样,帮我看看这样是否可行?

    watch: {
            selectedList(newVal, oldVal) {
                this.newSelectedList = newVal;
            },
            newSelectedList(newVal, oldVal) {
                this.$emit("update:selectedList", newVal);
            }
        },
    点赞 评论 复制链接分享
  • qq_25857899 qq_1872583947 4月前

    方法二:用vuex

    点赞 评论 复制链接分享
  • qq_25857899 qq_1872583947 4月前
    方法一:
    子组件: this.$emit('xxx', 参数)
       
    父组件: <子组件 @xxx='方法名($event)'></子组件>
    点赞 评论 复制链接分享

相关推荐