vue.js - vuex状态没法正常更新到子组件？

问题描述

问 题

问题：vuex状态没法正常更新到子组件？

• 代码结构：
  filter.vue内部使用filter_area.vue子组件，filter_area.vue内部使用filter_area_item.vue子组件。

filter_area.vue 文件代码

<template>
    <div class="filter-area" v-show="show">
        <div class="filter-area-parent">
            <p class="parent"
               v-for="item in areaLists"
               :class="parentNo==item.area.value?'active':''"
               v-text="item.area.name"
               @click.stop="showChildren(item.area.value)"
            />
        </div>
        <div class="filter-area-children">
            <FilterAreaItem class="children"
                            v-for="item in areaLists"
                            :parentData="item.area"
                            :areaItem="item.busiArea"
                            :show="parentNo==item.area.value"
                            :childNo="childNo"//:childNo="busiAreaNo"(修改成这样就可以正常更新)
                            @updateData="updateData"
            />
        </div>
    </div>
</template>
<style lang="less" scoped>
    .filter-area {
        @height: 8rem;
        position: relative;
        line-height: 0.8rem;
        text-align: center;
        max-height: 8rem;
        overflow: hidden;

        .filter-area-parent {
            background-color: #f4f4f4;
            width: 50%;
            height: @height;
            left: 0;
            max-height: 8rem;
            overflow: auto;

            .parent {
                border-bottom: 1px solid #D8D8D8;
                box-sizing: border-box;
                &.active {
                    background-color: #EAEAEA;
                }
            }
        }
        .filter-area-children {
            width: 50%;
            height: @height;
            position: absolute;
            right: 0;
            top: 0;
            background: #EAEAEA;

            .children {
                max-height: 8rem;
                overflow: auto;
            }

        }

    }
</style>
<script type="text/babel">
    import FilterAreaItem from '../component/filter_area_item.vue'
    export default{
        data(){
            return {
                msg: 'hello vue',
                activeIndex: 0,
                parentNo:this.busiAreaBelong,
                childNo:this.busiAreaNo
            }
        },
        props: {
            areaLists: {
                type: Array,
                required: true
            },
            show: {
                type: Boolean,
                default: false
            },
            busiAreaBelong:{
                type:String
            },
            busiAreaNo:{
                type:String
            }
        },
        computed: {
            parentClass(){
                return ""
            }
        },
        methods: {
            showChildren(parentNo){
                this.parentNo = parentNo;
            },
            updateData(data, type){
                this.$emit('updateOptions', data, type);
            }
        },
        components: {
            FilterAreaItem
        }
    }
</script>

解决方案

已经搞定了。谢谢！

这篇关于vue.js - vuex状态没法正常更新到子组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！