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

Question

Vue 建议使用属性向下和事件向上模式在父组件和子组件之间传播数据。基于此，我创建了一个简单的选择框组件，其中列出了美国所有州并发出“州选择”事件。我在我的家长类(class)中订阅了此事件，一切正常。 这是我的代码:

<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变量时，这不会反射(reflect)在子组件中。

Answer 1

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

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

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