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这个参数