第二十七篇 属性修改问题

         在前面的几篇内容中，从组件的引入和使用到父子通信方式以及组件与组件之间的通信进行了一个简单的内容讲解，但在这些内容过程当中，相比会有一些操作让人疑惑，本篇内容就是来盘点这几篇内容当中需要去注意的一些问题，为什么先前的操作是这样的，而跟你想的有些不大一样。

属性

        在父传子的篇目当中，通过属性绑定的方式实现父传子，在子组件中使用props进行接收；操作如下：

         同样，在上篇内容当中使用这个事件中心来实现组件与组件之间的通信，这时如果同时使用props当中的值，且还要将$on接收的临时变量进行赋值的话，那么为什么要在data中去定义一个变量而不能直接去赋值给我们props中的属性呢？这样做有什么问题？先来一个图再来看代码比较直观一些。

        那么这种方式到底可不可行呢？下面代码测试一下：

效果如下：

 看一下控制台，有警告提示了：

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. 

         避免直接去修改属性，父传子当中，子组件当中是属于被动接收，如果随意修改，也即说随意的修改了父组件当中的数据，显然与我们之前所提及到的不能任意的修改否则出现问题无迹可寻；当父组件传过来film，而在子组件当中去修改赋值会影响到父组件的值发生变化；

属性  / 状态

        上面讲到了要避免属性的修改导致产生的一些问题，那么上面的代码当中有被注释掉的这一行代码；

         需要在 data 当中来去定义，然后将bus.$on传过来的临时变量进行赋值，这时可以子组件当中对data中定义info进行随意更改，它是属于一种状态，而不是一种属性；传过来的属性myevent在赋值的时候同样是需要写this，而data当中的info也同样是需要写this，但两者不完全相同，一种是状态，一种是属性！

        以上就是本篇内容，在组件与通信当中注意的问题，要避免直接去修改属性的内容，感谢大家的支持！