子组件向父组件传值_vue父子组件传值

先来说下父传子吧，需要先在父组件中引用子组件

<m-child></m-child>这种写法是vue文档规定的，建议这样写，不清楚的可以看下文档。

然后在子组件中用props对象接收一下<m-child :msg="'hello world'"></m-child>中的msg，在把msg渲染到子组件中，这样就完成了一个简单的父传子

再说一下子传父：

在子组件中写一个方法passMsg（），然后调用this.$emit(),第一个参数是在父组件中写的自定义事件，第二个参数是要传递的内容

箭头所指就是this.$emit中的第一个参数，然后在父组件中的data里设置一个msg接收子组件的数据，写一个函数showMsgs，调用msg接收子组件传递的数据

以上即是子传父，父传子的基本操作，希望能帮到正在学习vue的你

拓展延伸：

用this.$children()和this.$parent(),也可以完成父子组件的传递

下面演示下this.$children()

这里调用this.$children()返回的是这个父组件下的所有子组件，返回的是一个数组，所以要用[0]接收一下（因为我这里只有一个子组件，所以用[0]）

然后就可以拿到自己想要的数据了