Vuejs 2 组件通信问题

Question

在学习vuejs的组件这一章时，文档上讲到父子组件之间通信要通过props属性传递，在子组件中不要更改父组件传递过来的属性，否则控制台会给出警告。官方文档上的描述是：

图片上讲到，要想完成对prop值的修改，可以在子组件内定义一个局部的data属性，并将prop的初始值作为局部数据的初始值。我照着这个示例做了以后，以现子组件中的counter这个属性为空，没有任何的值，请问这是为何？

附上我的jsFiddle代码链接

在这个示例中，我将用户输入的信息userInputMessage动态绑定到子组件child-component的pass2childmsg属性，然后参照文档，定义一个局部的childOwnMessage去接收。我定义了两个方法，分别是转换为大写（upper）及小写（lower）模式，但在方法中，我打印childOwnMessage，显示其值为空，不知道问题出在了哪里，求助！

Answer 1

prop 作为初始值传入，子组件之后只是将它的初始值作为本地数据的初始值使用；

因为你userInputMessage为空
也就是说

data: function () {
    return { childOwnMessage: this.pass2childmsg }
}

相当于

data: function () {
    return { childOwnMessage: '' }
}

所以
后面父组件的userInputMessage再怎么更新，
子组件childOwnMessage都不会更新

demo:
https://jsfiddle.net/d6sdnbz2...

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop 。如果你这么做了，Vue 会在控制台给出警告。

把计算属性换成 watch
https://jsfiddle.net/d6sdnbz2...

Answer 2

@ycloud

感谢你的回答，看了你的例子后，我有两个问题：

后面父组件的userInputMessage再怎么更新，子组件childOwnMessage都不会更新

这里让我很疑惑，因为我使用的是动态绑定prop语法，而文档上写有：

动态Props - 链接
类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

这是文档上明确写了可以实时地将最新的值传递到子组件中，所以我才像文档上讲的那样，利用局部的data进行接收（下例代码），但是没有接收到任何值，这就让我很疑惑了。

data: function () {
    return { childOwnMessage: this.pass2childmsg }
}

你在例子中使用到计算属性，这是一个好办法，但是子组件中的upper及lower两个按钮没有作用，即使我把代码改成这样。

在你的基础上修改的代码

简单的讲一下我的需求：在父组件中，我将用户输入的内容userInputMessage动态绑定到子组件中，并且在子组件中对父组件传递过来的内容进行修改（前提是避免直接修改传递过来的内容，因为控制台会打印警告），但是你给我的例子中，我点击任意按钮，子组件的内容都不会更改，这是为什么呢？