首页软件办公正文

vue子组件向父组件传递数据原理 vue子组件向父组件通信

2023-10-28 89

子组件如何将值回传给父组件

自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件

使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

子组件：

我是text1组件--局部组件 -- {{msg}}

export default { name: 'text1', props: { msg:{type: Number} }, computed:{ msg1:function(){ return this.msg +1; } }, methods:{ jubu:function(){ console.log("子组件触发的方法"); this.$emit('jianting',this.msg1); } }}

父组件：

在引用子组件上定义一个监听事件，用来监听子组件触发事件，

methods 定义这个方法： jianting(value){ console.log(value); console.log("父组件用来监听子组件的方法"); }

需求假设要从子组件返回数据给父组件，

那么就可以使用这个函数： this.$emit(‘父组件的方法名’,要返回的数据);

而父组件的监听事件就可以捕获这个事件，获取返回给父组件的数据。

喜欢 (0)

上一篇：怎样把电脑调成护眼模式电脑怎么能调成护眼模式

下一篇：Excel 轻松批量删除指定关键词工作表的方法

标签：

原文链接：http://www.tpbz008.cn/post/40815.html

=========================================

http://www.tpbz008.cn/ 为 “电脑技术吧” 唯一官方服务平台，请勿相信其他任何渠道。

vue子组件向父组件传递数据原理 vue子组件向父组件通信

我是text1组件--局部组件 -- {{msg}}

猜你喜欢