Vue三种常用传值示例(父传子、子传父、非父子

Vue中的传值操作是开发中经常遇到的需求，主要有三种常见场景：父组件向子组件传值、子组件向父组件传值以及非父子组件间的传值。下面是详细的介绍及示例。

1. 父组件向子组件进行传值

父组件模板部分代码如下：

```html

```

对应的脚本部分，需要导入子组件并定义数据：

```javascript

```

子组件接收到父组件传递的值，需要在props中定义：

```javascript

```

2. 子组件向父组件传值

子组件模板部分添加按钮，并定义点击事件：

```html

子组件脚本部分定义数据和方法：data () { return { childValue: '我是子组件的数据' } }, methods中定义触发事件，通过emit进行传值：childClick () { this.$emit('childByValue', this.childValue) } }。父组件接收子组件的值，需要在methods中定义接收方法，接收方法名和子组件emit的方法名一致即可。然后可以通过赋值操作更新父组件的数据。通过这样操作，实现了子组件向父组件的传值。父组件模板部分添加监听事件即可。代码示例如下：父组件模板部分添加监听事件即可。代码示例如下：3. 非父子组件进行传值。由于非父子关系的组件无法直接进行传值操作，所以需要一个中间仓库来作为桥梁进行数据的传递。常见的做法就是创建一个公共的实例文件bus.js作为中间仓库。通过bus.$emit在发送数据的组件中触发事件传递数据，然后在接收数据的组件中用bus.$on监听事件并获取数据。这样就可以实现非父子组件之间的数据传递了。具体的实现方式需要结合具体的应用场景和项目的结构进行详细的实现。Vue中的传值操作可以通过不同的方式进行实现，开发者需要根据具体的业务需求选择合适的传值方式，以实现更为灵活和高效的数据交互和操作。Vue中的全局事件总线bus.js

设想一个场景，你需要两个组件间进行通信，而它们之间并没有直接的父子关系或共享祖先。这时，我们可以借助Vue的全局事件总线——bus.js来实现这一需求。下面让我们深入了解这个过程。

我们创建一个公共的bus.js文件，这个文件会作为中间传达的工具。我们在此导入Vue并创建一个新的Vue实例。

组件A的解读：

在组件A中，我们有一个元素值elementValue，以及一个按钮。当点击这个按钮时，会触发elementByValue方法，这个方法会向全局事件总线发出一个名为'val'的事件，并传递elementValue的值。

组件B的解读：

组件B中，我们也有一个按钮和一个显示区域。在组件挂载完成后，我们使用Bus的$on方法来监听名为'val'的事件。当该事件被触发时，我们会在控制台打印接收到的数据，并将该数据赋值给name。我们还有一个getData方法，用于对name的值进行自增操作。

以下是两个组件的代码解读：

组件A：

```html

```

组件B：

```html