关于vue子父级组件之间的数据传递

一、父级向子级传递数据：

在父组件中我们以下面的格式将数据传递给子组件（为了不混淆数据，我们将传递的数据名称和实际数据名设为一致的）：

在子组件中，我们这样来获取传过来的参数：

这只是传递一个参数，如果我们传递多个参数，在使用的时候，会出现一些小问题，需要注意一下：

在props 中传入多个数据是，如果在父组件的模板类添加其他元素或者字符就会有：(传递过来的数据为：msg1/msg2/msg3)

1、在最前面加入：每个子组件渲染出来都会在其前面加上，例如：

父级上：abc{{msg1}}{{msg2}}{{msg3}} ==》页面数据显示：abc msg1数据 abc msg2数据 abc msg3数据

2、在最后面加入：每个子组件渲染出来都会在其后面加上，例如：

父级上：{{msg1}}{{msg2}}{{msg3}}abc ==》页面数据显示：msg1数据 abc msg2数据 abc msg3 数据abc

3、在中间加入：他前面子组件后面加上，后面的子组件后面加上，例如：

父级上：{{msg1}abc{{msg2}}{{msg3}} ==》页面数据显示：msg1数据 abc abc msg2数据 abc msg3数据

二、父级向子级传递数据

曾以为只有父级可以给子级传递数据，没想到子级也可以给父级传递，二者的传递方式是完全不同的，在子组件上：

自己定义一个listenToChildEvent事件，一会在父组件的子标签上监听该事件。因此，在父组件上就有：

添加一个响应listenToChildEvent事件的处理方法，即获取数据，下方的data就是子组件传回的数据：

这样一来，数据就传递来了，但是需要注意一下，在子组件中我们需要以某种方式来触发我们自定义的listenToChildEvent事件，可以是click、mouseout、mouseover、onclick等等。