在
Vue 中，`$
emit` 是一个用于触发自定义事件的方法，常用于子组件向父组件传递数据。通过 `$
emit`，可以传递任意类型的参数，包括字符串、数字、对象、数组等。以下是一些常见的使用场景和示例。
### 子组件向父组件
传参
子组件通过 `$
emit` 触发事件，并将数据作为参数传递给父组件。
```
vue
<!-- 子组件 Children
.vue -->
<template>
<button @click="sendData">发送数据</button>
</template>
<script>
export default {
methods: {
sendData() {
this
.$
emit('receive-data', '来自子组件的消息');
}
}
};
</script>
```
父组件监听该事件并接收参数：
```
vue
<!-- 父组件 Father
.vue -->
<template>
<div>
<children @receive-data="handleReceiveData" />
<p>接收到的数据：{{ receivedMessage }}</p>
</div>
</template>
<script>
import Children from '
./Children
.vue';
export default {
components: { Children },
data() {
return {
receivedMessage: ''
};
},
methods: {
handleReceiveData(message) {
this
.receivedMessage = message;
}
}
};
</script>
```
### 传递多个参数
`$
emit` 可以传递多个参数，父组件的事件处理函数将按顺序接收这些参数。
```
vue
<!-- 子组件 -->
<script>
export default {
methods: {
sendData() {
this
.$
emit('multi-params', '参数1', '参数2', 123);
}
}
};
</script>
```
父组件接收多个参数：
```
vue
<!-- 父组件 -->
<template>
<div>
<children @multi-params="handleMultiParams" />
<p>参数1：{{ param1 }}</p>
<p>参数2：{{ param2 }}</p>
<p>数值：{{ number }}</p>
</div>
</template>
<script>
import Children from '
./Children
.vue';
export default {
components: { Children },
data() {
return {
param1: '',
param2: '',
number: 0
};
},
methods: {
handleMultiParams(param1, param2, number) {
this
.param1 = param1;
this
.param2 = param2;
this
.number = number;
}
}
};
</script>
```
### 使用 `$event` 接收单个参数
当父组件的方法需要接收子组件传递的参数以及额外的自定义参数时，可以使用 `$event` 来表示子组件传递的参数。
```
vue
<!-- 子组件 -->
<script>
export default {
methods: {
sendData() {
this
.$
emit('send-message', 'Hello from child');
}
}
};
</script>
```
父组件中同时接收 `$event` 和自定义参数：
```
vue
<!-- 父组件 -->
<template>
<div>
<children @send-message="handleMessage($event, '额外参数')" />
<p>消息：{{ message }}</p>
<p>附加信息：{{ extraInfo }}</p>
</div>
</template>
<script>
import Children from '
./Children
.vue';
export default {
components: { Children },
data() {
return {
message: '',
extraInfo: ''
};
},
methods: {
handleMessage(msg, extra) {
this
.message = msg;
this
.extraInfo = extra;
}
}
};
</script>
```
### 传递对象或数组
除了基本类型，`$
emit` 还可以传递对象或数组。
```
vue
<!-- 子组件 -->
<script>
export default {
methods: {
sendData() {
const data = {
name: '
Vue',
version: '3
.0',
features: ['响应式', '组件化']
};
this
.$
emit('send-object', data);
}
}
};
</script>
```
父组件接收对象：
```
vue
<!-- 父组件 -->
<template>
<div>
<children @send-object="handleObject" />
<p>名称：{{ obj
.name }}</p>
<p>版本：{{ obj
.version }}</p>
<ul>
<li v-for="(feature, index) in obj
.features" :key="index">{{ feature }}</li>
</ul>
</div>
</template>
<script>
import Children from '
./Children
.vue';
export default {
components: { Children },
data() {
return {
obj: {
name: '',
version: '',
features: []
}
};
},
methods: {
handleObject(data) {
this
.obj = data;
}
}
};
</script>
```
通过上述示例可以看出，`$
emit` 是
Vue 组件间通信的重要工具，尤其在子组件向父组件传递数据时非常实用。使用 `$
emit` 时，确保事件名称的唯一性和语义化，有助于提高代码的可读性和维护性。
本文介绍了如何在Vue应用中，子组件通过事件总线调用主组件的方法，并接收返回的参数，展示了前后端交互的基本原理和实践技巧。
扫一扫
754
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
