2023vue不相干组件怎么传参

在Vue中，组件通常可以通过props属性来传递数据，但是，有时候我们需要在不相干的组件之间传递数据。

例如，我们可能需要将一个组件的数据传递给另一个组件，但是这两个组件可能没有任何联系。在这种情况下，我们可以使用Vue的事件系统来实现非父子组件之间的通信。具体来说，我们可以使用Vue中的$on和$emit方法来发送和接收事件。

$on方法用于在当前组件中注册一个自定义事件，当事件触发时，当前组件可以执行相应的操作。$emit方法用于触发一个自定义事件，并将指定参数传递给所有监听该事件的组件。

示例如下：

<!-- 组件A -->
<template>
  <div>
    <!-- 触发事件 -->
    <button @click="sendDataToB">传递数据给组件B</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendDataToB() {
      // 发送事件
      this.$emit('sendData', '这是来自组件A的数据')
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <!-- 监听事件并接收数据 -->
    <div>收到的数据：{{ receivedData }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      receivedData: ''
    }
  },
  mounted() {
    // 监听事件
    this.$on('sendData', (data) => {
      this.receivedData = data
    })
  }
}
</script>

在这个示例中，我们在组件A中注册了一个名为“sendData”的自定义事件，并在其中使用$emit方法触发该事件。$emit方法会将“这是来自组件A的数据”的字符串作为参数传递给所有监听该事件的组件。

在组件B中，我们在mounted生命周期钩子中使用$on方法监听事件“sendData”，并在响应函数中更新组件B的数据receivedData。此时，组件B就可以接收从组件A中传递过来的数据了。

需要注意的是，非父子组件之间的通信需要使用专门的事件系统来实现，这样可以避免组件之间无限套娃而导致代码难以维护。因此，在实际开发中，我们应该尽量将组件之间的通信限制在父子组件之间。

以上就是vue不相干组件怎么传参的详细内容，更多请关注zzsucai.com其它相关文章！