Question

Vue建议使用property-down和event-up模式在父组件和子组件之间传播数据。基于此，我创建了一个简单的选择框组件，其中列出了所有美国州并且发出了“状态选择”事件。我在我的父类中订阅此活动，一切正常。这是我的代码：

<template>
    <select v-model="selectedStatus" id="orderStatusSelectBox" class="form-control" name="status" v-on:change="onChange" v-bind:preselectedStatus="filters.selectedStatus">
        <option value="" selected="selected" disabled>Select status</option>
        <option value="1">New</option>
        <option value="2">Scheduling</option>
        <option value="3">In production</option>
        <option value="4">Completed</option>
        <option value="5">On hold</option>
        <option value="6">Cancelled</option>
        <option value="7">Problem</option>
    </select>
</template>

<script>
    export default {
        data: function () {
            return {
                selectedStatus: ''
            }
        },
        mounted() {

            this.selectedStatus = (this.preselectedStatus ? this.preselectedStatus : '');
        },
        component: 'select-order-status',
        methods: {
            onChange() {
                this.$emit('statusSelected', this.selectedStatus);
            }
        },
        props: ['preselectedStatus'],
    }
</script>

在我的父组件中，除了这个选择框子组件，我有几个按钮（快速过滤器），您可以在其中快速过滤新订单或已完成订单。我在这些按钮上添加了点击事件，因此我可以选择新状态并将该值传播到我的子组件。

以下是代码：

<template>
    <div>
        <div class="row filters">
            <div class="col-md-12">
                <h4>QUICK FILTERS:</h4>
            </div>
        </div>

        <div class="row filters">
            <div class="col-md-4">
                <div class="row">
                    <div class="col-md-3">
                        <button type="button" class="btn btn-yellow m5 fixed-width-btn" v-on:click="statusSelected('1')">New Order</button>
                        <button type="button" class="btn btn-success m5 fixed-width-btn" v-on:click="statusSelected('4')">Completed</button>
                    </div>
                </div>
            </div>
        </div>
        <hr>
        <div class="row">

            <div class="col-md-2">
                <div class="form-group">
                    <order-status-select v-on:statusSelected="statusSelected" v-bind:selectedStatus="filters.selectedStatus"></order-status-select>
                </div>
            </div>

        </div>
        <hr>
        <span>
            <div class="col-md-3">
                <div class="form-group">
                    <select id="agentSelectBox" class="form-control" name="actions">
                        <option value="" selected="selected">Select action</option>
                        <option value="1">Action 1</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-default">Apply</button>
            </div>
            <div class="col-md-2">
                <button type="button" class="btn btn-default">Export CSV</button>
            </div>
        </div>
    </div>

</template>

<script>
    import OrderStatusSelectComponent from '../../reusable/OrderStatusSelectComponent.vue';
    export default {
        data: function () {
            return {
                filters: {
                    selectedStatus: '',
                    resultsPerPage: 10,
                    currentPage: 1,
                },
            }
        },
        mounted() {
        },
        component: 'filters',
        methods: {
            search() {
                this.$emit('search', this.filters);
            },
            statusSelected(selectedStatus) {
                this.filters.selectedStatus = selectedStatus;
            }
        },
        components: {
            'order-status-select': OrderStatusSelectComponent,
        },
    }
</script>

问题是，当我点击任何按钮（快速过滤器）时，数据不会被提升为子组件。

我看到其他一些帖子暗示了Vuex和Vue Bus，但有没有其他推荐的方法来处理这个问题？

这是造成问题的代码的和平。

<order-status-select v-on:statusSelected="statusSelected" v-bind:selectedStatus="filters.selectedStatus"></order-status-select>

因此，从我的父组件开始，我想将filters.selectedStatus传递给子组件。当我的子组件中正确选择了应用程序呈现filters.selectedStatus中的第一次状态时，但是当我改变filters.selectedStatus变量后，它将不会反映在子组件中。

Answer 1

您的子组件仅检查mount上的preselectedStatus，并且在组件安装完成后，它永远不会再次查看该属性，即使其值发生更改。

解决此问题的一种方法是让子组件监视其属性以进行更改，并根据需要进行响应：

...
watch: {
  preselectedStatus() {
    // property value changed:
    this.selectedStatus = (this.preselectedStatus ? this.preselectedStatus : '');
  }
},
...

数据未从父组件传播到子组件

1 个答案: