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

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

自定义事件

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

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

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

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

 

子组件： 

<template>
  <div class="hello">
    <h1 @click="jubu">我是text1组件--局部组件 -- {{msg}}</h1>
  </div>
</template>
<script>
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);
    }
  }
}
</script>

父组件： 

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

<text1 v-on:jianting="jianting" v-bind:msg=1></text1>

 methods 定义这个方法： 

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

 

 

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

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

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