关于vue中 $emit的用法详解

Vue中的$emit：父子组件间的信息传递详解

在Vue中，父子组件间的通信是开发过程中常见的需求。我们可以通过props将数据从父组件传递给子组件，而$emit则允许子组件触发父组件的自定义事件，实现两者之间的信息交互。

一、基本用法

1. 父组件通过props向子组件传递数据。

2. 子组件通过$emit触发自定义事件，将信息传回父组件。

二、实例详解

1. 子组件示例：

```html

```

在这个例子中，当点击“大连”时，会触发select方法，并通过$emit触发showCityName事件，将选定的城市名传递给父组件。

2. 父组件示例：

```html

```

在这个例子中，父组件监听了子组件的showCityName事件，并在updateCity方法中更新了自己的数据。当子组件触发showCityName事件时，父组件的toCity值会被更新为子组件传递的城市名。

三、结果展示：点击“大连”后，控制台将输出“toCity:大连”，表示父组件已成功接收到子组件传递的信息。

以上是关于Vue中$emit用法的详细介绍，希望对大家有所帮助。如有任何疑问，请留言交流。也感谢大家对狼蚁SEO网站的支持！长沙网络推广团队将持续为大家提供优质的文章和教程。