Vue.js：child 组件如何改变 parent 的状态？

Question

在vuejs.org里面说：

The two-way binding will sync the change of child’s msg property back to the parent’s parentMsg property. (Here is the link.)

但我很困惑，我该如何更改 child 的属性，以便此更改可以同步回其 parent？

路由器

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

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

List.vue (parent)

<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 (child)

<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>

我只想突变parent中的active属性(List.vue)，如何实现？

谢谢大家！

Answer 1

two-way 绑定的工作方式与您想象的一样：当您更改 parent 中的属性时，它会在 children 中更改，反之亦然反之亦然。以这个为例：https://jsfiddle.net/u0mmcyhk/1/，children 可以改变 parent 的状态。如果从 parent 模板中删除 .sync，它将停止工作。

话虽如此，.sync 将在 2.0 中弃用，取而代之的是通信（broadcast、dispatch）或某些状态管理，如 vuex。

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

Vue.js：child 组件如何改变 parent 的状态？

Vue.js: How the child components mutate the parent's state?

javascript

vue.js

vue-router

vue-component

路由器

List.vue (parent)

DetailAdd.vue (child)