vue兄弟组件传递数据的实例

Vue兄弟组件间数据传递的实例

随着前端技术的不断发展，Vue框架的应用越来越广泛。在实际开发中，兄弟组件间的数据传递是一个常见的需求。今天，长沙网络推广为大家带来一篇关于Vue兄弟组件间如何传递数据的实例分享，希望对大家有所帮助。

在项目的main.js中，我们需要设置一个全局的Vue实例，命名为eventHub，所有组件都可以调用它。这样，我们就可以通过它来触发和监听事件，实现组件间的数据传递。

```javascript

new Vue({

el: 'app',

router,

store,

template: '',

components: { App },

data: {

eventHub: new Vue() // 在main.js设置所有组件都能用调用

},

})

```

接下来，我们来看组件一如何通过事件调用组件二的事件，并传递数据给组件二。

```html

```

那么，组件二如何被触发事件并接受参数呢？我们接着看下面的代码。

```html