Vue.js：子组件如何改变父级的状态？

Question

在vuejs.org中，有人说：

  

双向绑定会将子级msg属性的更改同步回父级的parentMsg属性。 （这是link。）

但我很困惑，我怎么能改变孩子的属性，以便可以将此更改同步回其父级？

路由器

// Define rule of router.
router.map({
    '/categories': {
        // The List.vue
        component: CategoryList,

        subRoutes: {
            // ... some rules ...
            '/add': {
                // The DetailAdd.vue
                component: CategoryDetailAdd
            }
        }
    }
});

List.vue（父母）

<template>

    <tab v-bind:tabs="tabs" :active="active"></tab>

    <div class="col-lg-12">
        <router-view :categories="categories"></router-view>
    </div>

</template>
<script>

    var Tab = require('../common/Tab.vue');
    export default{
        components:{
            tab: Tab
        },
        data() {
            return {
                categories: [],
                tabs: [],
                active: '1'
            };
        },
        ready() {
            this.$http.get('/categories').then((response) => {
                // success
                this.$set('categories', response.data.categories);
                this.$set('tabs', response.data.tabs);
                this.$set('active', response.data.active);
        }, (response) => {
                // error
            })
        }
    }
</script>

DetailAdd.vue（孩子）

<template>
    <form class="form-horizontal" method="post" action="/categories/add">

        <div class="form-group">
            <label for="name" class="col-md-2 control-label">name</label>
            <div class="col-md-10">
                <input id="name" type="text" class="form-control" name="name" value="" />
            </div>
        </div>

        <div class="form-group">
            <label for="category_id" class="col-md-2 control-label">superiror</label>

            <formselect></formselect>
        </div>

        <div class="form-group">
            <label for="sort_order" class="col-md-2 control-label">sort</label>
            <div class="col-md-10">
                <input id="name" type="text" class="form-control" name="sort_order" value="" />
            </div>
        </div>

        <formbutton></formbutton>
    </form>
</template>

<script>
    var FormSelect = require('../common/FormSelect.vue');
    var FormButton = require('../common/FormButton.vue');

    export default{
        components: {
            formselect: FormSelect,
            formbutton: FormButton
        }
    }

    $(function() {
        $('.nav-tabs').on('ready', function() {
            $('.nav-tabs li').attr('class', '');
            $('.nav-tabs li:last').attr('class', 'active');
        });
    });
</script>

我只是想改变父（active）中的List.vue属性，如何实现这个目标？

谢谢大家！

Answer 1

双向绑定的工作方式与您的想法相同：当您更改父级中的属性时，它会在子级中更改，反之亦然。以此为例：https://jsfiddle.net/u0mmcyhk/1/，孩子们可以改变父母的状态。如果从父模板中删除.sync，它将停止工作。

话虽如此，.sync将在2.0上弃用，有利于沟通（broadcast，dispatch）或某些州管理，例如vuex。

更多信息：https://vuejs.org/api/#v-bind