父传子:通过属性传递
a.在父组件内通过属性传值,在引入子组件的标签上,自定义属性然后绑定上你所需要传输的值
b.在子组件内通过props属性进行接收
c. 所接收的值不能直接修改
接收方法:
子传父:通过事件 传递
a.在父组件内定义一个方法
B.然后在子组件内进行调取,调取方法为:this.$patent.方法名(然后把所需要的参数传到方法的参数里)
如图所示: 父组件:注释:代码内容不重要,重要的是定义了一个changeVal 这个函数,然后接收了it这个参数
子组件:注释:这个方法是直接调用了父组件的方法,也就是直接获取了整个父组件对象,所以这个方法很多时候不合理,相当于子组件干涉了父组件的业务
子组件内有一个changeEvt这个事件来触发父组件的方法
使用this.$parent.changeVal( it )来调取父组件所定义的方法,it 则为所需要传入的参数
子传父,方法二:
通过自定义事件进行传递
a.在父组件内引入子组件的标签上,自定义一个事件,如:@changVal=“changeVal”
b.在子组件内,通过$emit进行值传递,如this.$emit( “changeVal”, it, “other” ),第一个参数固定为定义的事件名,后面接着写所需要带上的参数, 可以一次往后排,也可以传入一个对象
如图所示:
父组件:在父组件内定义方法的方式和 "方法一" 一样
子组件:在子组件内,通过$emit进行传值