vue 组件间通信 子传父，自定义事件

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 7 天，点击查看活动详情”

在项目中经常遇到组件间传值，子传父一般用的是自定义组件的形式实现的。

$emit：触发父组件上的自定义事件，然后将值传给父组件。

（本质其实是子组件调用父组件上的方法，向父组件的方法提供实参）

注意：$emit（fun,value） 的第一个参数是父组件自定义事件的方法名，后边的 “value” 就是子组件要给父组件传递的数据 。

一般情况下为元素绑定事件通过v-on：事件名=方法名，

简写为@：事件名=方法名

绑定自定义事件有两种方式：

1. 使用v-on
2. 使用ref

v-on

1.在父组件中，给子组件标签通过绑定v-on：自定义事件="函数名"，绑定一个函数，

<child @info="getInfo">

info就是自定义事件名

<button @click="datas"></button> 绑定一个点击事件。

在父组件的methods里面定义这个函数getInfo（value）{}（需要接收一个参数value，value就是子组件传过来的数据）

2.在子组件中，定义一个click事件@click="datas"（任何事件都可以如change），接着在methods内写出datas，在其内部通过$this.$emit（事件名，参数）去触发父组件里的自定义事件，括号内的第一个参数是自定义事件名字，后面的参数是数据，（注意：给哪个子组件绑定自定义事件就去哪个子组件去触发这个事件）

3.在子组件的methods里面定义触发这个函数的函数，通过this.函数名括号传数据。

具体写法参考

子组件

<template>
<div> 
<button @click="datas"></button> 

</div>
</template> 
<script> 
export default { 
methods: { 
datas() { 
this.$emit("info", value); 
} } }; </script>

父组件

<template> 
<div>

<child @info="getInfo"></child> 
</div> </template> 
<script> 
import { child } from "./child"; 
export default {
components: { child }, 
methods: { 
getInfo(value) { 
// value 就是子组件传递过来的数据 
} } }; </script>