vue父子组件通信技术(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> methods 定义这个方法：  jianting(value){      console.log(value);      console.log(\"父组件用来监听子组件的方法\");    } 

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

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

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