vue.js - Vuejs 2 组件通信问题

问题描述

问 题

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

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

附上我的jsFiddle代码链接

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

解决方案

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

这篇关于vue.js - Vuejs 2 组件通信问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！