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('父组件的方法名',要返回的数据);

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

最后

以上就是安详烤鸡为你收集整理的vue 子组件如何将值回传给父组件的全部内容，希望文章能够帮你解决vue 子组件如何将值回传给父组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。