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

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

自定义事件

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

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

• 使用 $on(eventName) 监听事件
• 使用 $emit(eventName) 触发事件

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

 

子组件： 

父组件： 

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

 methods 定义这个方法： 

 jianting(value){
      console.log(value);
      console.log("父组件用来监听子组件的方法");
    }

 

 

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

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

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