一、父级向子级传递数据:
在父组件中我们以下面的格式将数据传递给子组件(为了不混淆数据,我们将传递的数据名称和实际数据名设为一致的):
在子组件中,我们这样来获取传过来的参数:
这只是传递一个参数,如果我们传递多个参数,在使用的时候,会出现一些小问题,需要注意一下:
在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等等。