Vue组件Prop 绑定类型的疑问【Solved】

Question

Vue组件Prop 绑定类型的疑问【Solved】

发布于
2016-10-17

更新于
2016-10-17

代码如下；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<button @click="changegroup">改变group子组件</button>
<groupcomponent :groupmessage="group"></groupcomponent>
<todocomponent :todomessage="todolist"></todocomponent>
<template id="group_co">
    <div @click="groupidclick">{{groupmessage.id}}</div>
    <div>{{groupmessage.name}}</div>
    <div>{{tag}}</div>
</template>
<template id="todo_template">
    <ul>
        <li v-for="todo in todomessage">
            <span>ID: {{todo.id}},   </span>
            <span>Title{{todo.title}}</span>
        </li>
    </ul>
</template>
<script>
    var groupcomponent = Vue.extend({
        template: '#group_co',
        props: ['groupmessage'],
        data: function () {
            return {
                'tag': 'intresting'
            }
        },
        methods: {
            groupidclick: function () {
                console.log('group id click.');
                console.log(this.groupmessage);
                this.groupmessage.name = 'click';
            }
        }
    });
    Vue.component('groupcomponent', groupcomponent);
    var todocomponent = Vue.extend({
        template: '#todo_template',
        props: ['todomessage']
    });
    Vue.component('todocomponent', todocomponent);
    vml = new Vue({
        el: 'body',
        data: {
            group: {
                id: 12,
                name: 'default'
            },
            todolist: [
                {
                    id: 1,
                    title: 'todo 1'
                },
                {
                    id: 2,
                    title: 'todo 2'
                }
            ]
        },
        methods: {
            changegroup: function () {
                this.group.id = '2';
                this.group.name = 'changed';
            }
        }
    })
</script>
</body>
</html>

页面效果如下：
图片描述
文档如下：

我在组件groupcomponent中的groupidclick函数中修改了name的值为click，但是文档中说值是单向绑定的，也就是父组件中值的变换能够传到子组件，但是子组件的值变换了传不到父组件，可以当我点击groupcomponent组件中的id的时候，groupmessage.name却发生了改变，是我哪里理解错了么？

文档中所说的属性变化，应该指的是如果我在子组件中为group添加一个属性叫做user，这个时候在父组件中是获取不到这个user属性的,如果在父组件中增加group的属性叫做user那么在子组件中是可以读取这个属性的值的.

我的理解对么？