Vue.js:子组件如何改变父组件的状态

在vuejs.org中，有人说:

双向绑定会将子节点的msg属性的变化同步回父节点的parentMsg属性。(这是链接)

但是我很困惑，我怎么能改变孩子的属性，使这个变化可以同步回它的父?

// Define rule of router.
router.map({
    '/categories': {
        // The List.vue
        component: CategoryList,
        subRoutes: {
            // ... some rules ...
            '/add': {
                // The DetailAdd.vue
                component: CategoryDetailAdd
            }
        }
    }
});

列表。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>

我只是想改变父(List.vue)的active属性，如何实现这一点?

谢谢大家!