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

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

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

这个是最简单的,首先父组件通过components引入子组件,如果要传入子组件的值是动态的.可以将该值双向绑定在调用的子组件上,子组件只需要做一件事,那就是通过props接收,如下:

父组件 父组件1.png
子组件 子组件1.png

2.子组件往父组件传值

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

父组件 父组件2-0.png 父组件2-1.png
子组件 子组件2-0.png 子组件2-1.png

3.子组件改变父组件传来的值
正常,基于vue的单项数据流,子组件是不允许直接对父组件传来的值进行修改的,所以我们应该避免这种直接修改父组件传来值的操作.

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

子组件3-0.png
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"这样的错误 子组件3-3.png
报错的意思就是我上面所说的子组件不允许修改

我们只需要这样修改就可以了

子组件3-1.png

这里需要注意一点,就是watch这一块儿,如果单单只通过第2步来试图将父组件传过来的值进行赋值的话,子组件realnameshow这个值并不会随着父组件realshow 的值进行改变,因为data只是一个初始值,所以我们才需要watch这个属性来动态的修改realnameshow这个参数

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

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

子组件3-4

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

个人创作,未经允许不可擅自转载