上一期讲述了什么是组件通信,并详细介绍了组件通信中的父传子。
既然存在父组件向子组件传值,那么就存在子组件向父组件传值。
这次是组件通信中的子传父
divid=' app ' app/app/divscriptvue.com ponent (' child ',{ template:` div h2我是子组件/H2 input type=' text @ ) this.$Emit(inputHandler ),val ); } } constapp={ data () } { return { newval : ' }, template:` div数据({ newval } } child @ input handler=' input handler ) } methods3360{input(newval ) this.newval=/script按惯例应改为一个全局组件Child,一个局部组件App
因为我们在App组件中使用了Child组件,所以其中会有产生了一个父子组件的关系。
子传父的过程:
3358 www.Sina.com/http://www.Sina.com /解释起来可能有点绕口,请看一下我发送的示例代码。
首先,为首先在父组件中使用的子组件上绑定自定义事件编写绑定了newVal,然后在子组件中绑定原生的事件,在事件函数中,通过this.$emit触发自定义事件的div,然后使用名为Child的子部件将http://www
查看3App组件,该组件包含展示来自子组件传进来的值, 只写了http://www.Sina.com/,绑定了我们熟悉的* * @ input=‘handle input’,而我们最关键的是这个3358 www.Sina.com
这就是全部的过程。 我以为我已经详细说明了。 有问题的人请加QQ交流哦。
自定义事件@inputHandler = ‘input’
关注以下微信公众号,可接收微信程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
请注意,最新的完整前端知识总结和项目源代码会在第一时间发布在微信公众号上。 谢谢你。