最近小编收到很多问题,其中一个就是下面小编为大家整理一下关于vue父组件触发子组件方法的步骤,希望这些方法能够帮助到大家。
工具/原料
电脑
方法/步骤
1
首先,子组件通过$emit触发父组件的事件,$emit后面的参数是向父组件传参,参数直接传递到了父组件的methods的事件处理函数了。vue子组件用了定义模板组件功能,然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。
2
然后,在父子组件间传递,使用$on()监听事件;使用$emit()在它上面触发事件;使用$dispatch()派发事件,事件沿着父链冒泡;使用$broadcast()广播事件,事件向下传导给所有的后代,Vue2.0后$dispatch(),$broadcast()被弃用。
3
然后,在Father上一个输入框,根据输入传递到Child组件上。父组件:
//将子控件属性inputValue与父组件msg属性绑定
4
然后,输入子组件:
{{inputValue}}
。
5
然后,父组件传递数据给子组件,通过props属性来实现,父组件:
6
//监听子组件触发的upup事件,然后调用change方法methods: {
change(msg) {
this.msg = msg;
}
}。
最后,子组件与父组件的通信,可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的。子组件: methods: { up() { this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据 }。父组件: }
注意事项
1
上述方法为小编整理所得,希望能够帮助到大家。
2
上述图片来源于网络,可能与方法不符。
下一篇:word中怎么输入摄氏度的符号?