Vue一个例子看懂父子组件之间传值

最近在作vue的项目,发现项目中有不少功能是重复的,这时咱们就须要想到将这一部分的功能作成一个组件来减小咱们的代码量,使代码看起来更加的简洁,优美.下面咱们就来谈谈封装公共组件时遇到的一些问题

1.父组件往子组件中传值

这个是最简单的,首先父组件经过components引入子组件,若是要传入子组件的值是动态的.能够将该值双向绑定在调用的子组件上,子组件只须要作一件事,那就是经过props接收,以下:

父组件

子组件

2.子组件往父组件传值

能够定义一个事件来触发响应的$emit使父组件能够知道有事件改变,进而接收对应的参数,以下:

父组件

子组件

3.关于子组件改变父组件传来的值

正常,基于vue的单项数据流,子组件是不容许直接对父组件传来的值进行修改的,因此咱们应该避免这种直接修改父组件传来值的操做.

当子组件这样来操做的话,会报

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. Prop being mutated: "realshow"这样的错误

报错的意思就是我上面所说的子组件不容许修改

咱们只须要这样修改就能够了

这里须要注意一点,就是watch这一起,若是单单只经过第2步来试图将父组件传过来的值进行赋值的话,子组件realnameshow这个值并不会随着父组件realshow 的值进行改变,由于data只是一个初始值,因此咱们才须要watch这个属性来动态的修改realnameshow这个参数

最近更新2019/7/24-----------------------------------------------------------------------------------------

新的处理方法,用计算属性来处理,借用getter和setter. 由于上述方法中watch来监听怎么看都比较好性能,能不用监听就不用监听嘛!对吧

好了,关于父子组件之间的传值问题大概就是这些,你们能够参考参考,前端菜鸟一个,可能会有些出入,欢迎留言提出一些建议

我的创做,未经容许不可擅自转载
简书过来的图片显示不出来的问题已解决,欢迎https://www.jianshu.com/p/f7c...