父子组件间方法的传递

父子组件间方法的传递

1,父组件调用子组件的方法

1.1 使用 $refs 直接调用

子组件

......  
/* 一个方法,打印输入的参数 */
show_value(value){
	console.log(value
}
.....

父组件

......
<children ref="chd"></children>
...
this.refs.chd. show_value(123)
......

结果是打印输出123

1.2 使用 $children 直接调用

子组件不变

父组件
调用多个子组件时,不一定是[0]

......
<children></children>
...
this.$children[0].show_abc(123)
......

结果是打印输出123

2,子组件调用父组件的方法

2.1 使用 $parent 直接调用

父组件

......
<children></children>
...
show_value(value){
	console.log(value)
}
.....

子组件

......
this.$parent.show_value(123)
......

结果是打印输出123

2.2 使用 props

父组件

......
<children :show_value="show_value"></children>
...
show_value(value){
	console.log(value)
}
.....

子组件

.......
props: { show_value: Function }

this.show_value(123)
......

结果是打印输出123

2.3 使用 v-on

父组件

......
<children @show_value="show"></children>
...
show(value){
	console.log(value)
}
.....

子组件

.......
props: { show_value: Function }

this.show_value(123)
......

结果是打印输出123

2.4 使用 $emit

父组件

......
<children @show_value="show"></children>
...
show(value){
	console.log(value)
}
.....

子组件

.......
this.$emit('show_value',123)
......

结果是打印输出123