`$emit` 是 Vue.js 中用于子组件向父组件传递数据的方法。通过 `$emit`，子组件可以触发一个自定义事件，并传递数据给父组件，父组件则监听该事件并处理数据。
### 基本用法
1. **在子组件中触发事件：**
使用 `$emit` 触发一个自定义事件，并传递数据。
```javascript
// 子组件 ChildComponent.vue
<script>
export default {
methods: {
sendMessage() {
this.$emit('message', 'Hello from Child!');
}
}
}
</script>
```
在这个例子中，当用户点击按钮时，子组件会触发一个名为 `message` 的事件，并传递字符串 `'Hello from Child!'` 作为数据。
2. **在父组件中监听事件：**
父组件通过 `v-on` 或 `@` 监听子组件触发的自定义事件，并处理传递过来的数据。
```javascript
// 父组件 ParentComponent.vue
{{ receivedMessage }}
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedMessage: ''
};
},
methods: {
handleMessage(message) {
this.receivedMessage = message;
}
}
}
</script>
```
在这个例子中，父组件监听 `message` 事件，并将接收到的消息存储在 `receivedMessage` 中，然后在模板中显示。
### 传递多个参数
`$emit` 可以传递多个参数，父组件可以通过方法接收这些参数。
```javascript
// 子组件 ChildComponent.vue
<script>
export default {
methods: {
sendData() {
this.$emit('data', { name: 'Alice', age: 25 });
}
}
}
</script>
```
```javascript
// 父组件 ParentComponent.vue
Name: {{ receivedData.name }}, Age: {{ receivedData.age }}
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedData: {}
};
},
methods: {
handleData(data) {
this.receivedData = data;
}
}
}
</script>
```
### 使用 `$emit` 的注意事项
1. **事件命名：** 事件名建议使用 kebab-case（短横线分隔），因为 HTML 属性不区分大小写。
2. **单向数据流：** `$emit` 主要用于子组件向父组件传递数据，保持单向数据流，避免直接修改父组件的数据。
3. **事件修饰符：** 可以使用 `.native` 修饰符监听原生 DOM 事件。
### 总结
`$emit` 是 Vue.js 中实现子组件向父组件通信的核心方法。通过自定义事件，子组件可以传递数据给父组件，父组件则监听这些事件并处理数据。这种方式有助于保持组件的独立性和可维护性。