0

在 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
            }
        }
    }
});

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）中的属性，如何实现呢？

谢谢大家！

4

1 回答 1

2

双向绑定的工作方式与您可能认为的一样：当您更改父项中的属性时，子项中的属性也会更改，反之亦然。以这个为例：https ://jsfiddle.net/u0mmcyhk/1/ ，孩子们可以改变父母的状态。如果.sync从父模板中删除，它将停止工作。

话虽如此，.sync将在 2.0 上弃用，以支持通信（broadcast, dispatch）或一些状态管理，如vuex.

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

于 2016-08-17T04:07:26.260 回答