子组件向父组件传值,不足之处请多指教

305 阅读1分钟

子组件向父组件传值 常用方式

image.png 使用 this.emit()向父组件传值this.emit()向父组件传值 this.emit("lunchMethods","lunchValue"),中的第一个值为子组件向父组件发射的方法,在父组件中通过绑定该方法获取到子组件的传值,第二个值为子组件需要传递的值

image.png

绑定子组件传过来的方法(lunchMethods)可以通过自定义的方法getValue获取到值,其中getValue绑定的值必须为($event),写其他无效。

在父组件中应用的时候可以写其他参数的名字getValue(value)

image.png 接下来我们试验一下不使用按钮点击触发,我们使用mounted生命周期函数,在控制台得到子组件传给父组件的值。

image.png 控制台

image.png 可以到看在子组件中使用mounted函数正确的得到了我们想传给父组件的值。 接下来再看看在父组件中使用mounted,在子组件中不使用mounted函数。

控制台 image.png 很遗憾没有得到我们想要的值。 最后看看同时在父子组件中使用mounted函数,会发生什么呢。

image.png 通过控制台可以看到父组件打印了两次,在同一行,也就是对同一个值打印了两次,但是只得到一个值。

提问:为什么会出现这种情况。