多语言展示
当前在线:261今日阅读:113今日分享:31

vue父组件触发子组件方法

最近小编收到很多问题,其中一个就是下面小编为大家整理一下关于vue父组件触发子组件方法的步骤,希望这些方法能够帮助到大家。
工具/原料

电脑

方法/步骤
1

首先,子组件通过$emit触发父组件的事件,$emit后面的参数是向父组件传参,参数直接传递到了父组件的methods的事件处理函数了。vue子组件用了定义模板组件功能,然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。

2

然后,在父子组件间传递,使用$on()监听事件;使用$emit()在它上面触发事件;使用$dispatch()派发事件,事件沿着父链冒泡;使用$broadcast()广播事件,事件向下传导给所有的后代,Vue2.0后$dispatch(),$broadcast()被弃用。

3

然后,在Father上一个输入框,根据输入传递到Child组件上。父组件:

5

然后,父组件传递数据给子组件,通过props属性来实现,父组件:    //这里必须要用 - 代替驼峰data(){    return {        msg: [1,2,3]    }; }。

6

最后,子组件与父组件的通信,可以通过触发事件来通知父组件改变数据,从而达到改变子组件数据的目的。子组件: methods: {    up() {        this.$emit('upup','hehe'); //主动触发upup方法,'hehe'为向父组件传递的数据    }。父组件: }

    //监听子组件触发的upup事件,然后调用change方法
methods: {    change(msg) {        this.msg = msg;    } }。

注意事项
1

上述方法为小编整理所得,希望能够帮助到大家。

2

上述图片来源于网络,可能与方法不符。

推荐信息