vue兄弟传参是什么模式

Vue兄弟组件之间传参有多种模式，常用的有以下几种：

1. Props和事件：父组件通过props属性将数据传递给子组件，子组件可以通过$emit方法触发事件，将需要传递给其他兄弟组件的数据传递给父组件，然后父组件再通过props将数据传递给其他子组件。

2. Event Bus：Event Bus是Vue的一个全局事件总线，可以在任何组件间传递数据。在Vue实例中，可以通过new Vue()创建一个Event Bus实例，并将其挂载到Vue的原型对象上，这样就可以在组件中通过this.$bus来访问Event Bus。子组件通过$emit方法向Event Bus发布事件，同时可以传递数据，其他组件通过$on方法监听事件，并在回调函数中接收数据。

3. Vuex：Vuex是Vue的官方状态管理库，可以用于在不同组件间共享数据。通过在Vuex中定义state来存储数据，不同组件可以通过vuex的getter和setter方法访问和修改数据。当一个组件修改了数据后，其他组件可以立即获取最新的数据。

4. localStorage或sessionStorage：localStorage和sessionStorage是浏览器提供的本地存储方案，可以用于在不同页面或标签间传递数据。兄弟组件可以将数据存储在localStorage或sessionStorage中，其他组件可以从中读取数据。

5. URL参数：如果兄弟组件之间的数据传递是通过URL进行的，可以使用URL参数来传递数据。一个组件可以将数据作为URL参数添加到URL中，其他组件可以从URL中读取数据。

以上是常见的兄弟组件之间传参的几种模式，开发者可以根据实际情况选择合适的方式进行数据传递。

Vue中的兄弟传参指的是在Vue组件间进行数据传递的一种模式。Vue本身并没有提供官方的兄弟组件之间传参的方法，但是我们可以通过一些技巧和方法实现兄弟组件之间的数据传递。以下是几种常见的模式：

1. 使用共同的父组件：在父组件中创建一个数据并传递给兄弟组件。兄弟组件可以通过props接收父组件传递的数据，并且可以在需要的时候通过事件进行修改。

2. 使用事件总线：创建一个Vue实例作为事件总线，在兄弟组件中通过$emit触发事件，并在另一个兄弟组件中通过$on监听事件。通过事件总线可以实现兄弟组件之间的数据传递。

3. 使用Vuex：Vuex是Vue的状态管理工具，它可以在兄弟组件之间共享数据。可以将需要传递的数据存储在Vuex的state中，在兄弟组件中通过$store.state访问数据，并且可以通过提交mutation来修改数据。

4. 使用localStorage或sessionStorage：可以将需要传递的数据存储在localStorage或sessionStorage中，在兄弟组件中通过读取localStorage或sessionStorage来获取数据，并且可以通过修改localStorage或sessionStorage来修改数据。

5. 使用$refs：可以通过在父组件中给子组件添加ref属性来获取子组件的实例，从而可以直接在兄弟组件中访问和修改子组件的数据。

以上是几种常见的Vue兄弟传参的模式，根据具体的需求和场景选择适合的方法来实现兄弟组件之间的数据传递。

在Vue中，兄弟组件之间传参可以通过props、事件总线、Vuex等方式来实现。其中，props是最常用的方式。

一、props方式
兄弟组件之间通过props方式传参是一种单向传递的方式，即只能从父组件传递给子组件，而不能反向传递。下面是通过props方式实现兄弟组件传参的步骤：

1. 在父组件中定义一个数据属性，并将需要传递给兄弟组件的值赋给该属性。例如，将值传递给名为"message"的子组件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

2. 在子组件中通过props属性声明接收父组件传递过来的值。例如，在名为"child-component"的子组件中声明message属性：

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: ['message']
}
</script>

这样，父组件中的message值就会传递到子组件中并显示出来。

二、事件总线方式
事件总线是一种兄弟组件之间相互通信的方式，它可以实现兄弟组件之间的双向传递。下面是通过事件总线方式实现兄弟组件传参的步骤：

1. 创建一个新的Vue实例作为事件总线，可以在main.js中创建：

import Vue from 'vue'
export const bus = new Vue()

2. 在发送组件中触发事件并传递参数。例如，通过点击按钮时触发事件并传递参数：

<template>
  <button @click="sendMessage">发送消息</button>
</template>
<script>
import { bus } from '@/main.js'
export default {
  methods: {
    sendMessage() {
      bus.$emit('message', 'Hello World')
    }
  }
}
</script>

3. 在接收组件中监听事件并接收参数。例如，在另一个组件中监听事件并接收参数：

<template>
  <div>{{ receivedMessage }}</div>
</template>
<script>
import { bus } from '@/main.js'
export default {
  data() {
    return {
      receivedMessage: ''
    }
  },
  created() {
    bus.$on('message', this.handleMessage)
  },
  methods: {
    handleMessage(message) {
      this.receivedMessage = message
    }
  }
}
</script>

这样，当发送组件中点击按钮触发事件后，接收组件就会接收到事件并将参数赋值给接收组件的数据属性。

三、Vuex方式
Vuex是Vue的官方状态管理库，它可以实现不仅兄弟组件之间的传参，还可以实现任意组件之间的数据共享。以下是通过Vuex方式实现兄弟组件传参的步骤：

1. 创建一个Vuex store来存储需要共享的数据，可以在store文件夹中的index.js中创建：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    message: ''
  },
  mutations: {
    setMessage(state, message) {
      state.message = message
    }
  }
})

2. 在发送组件中通过commit方法触发mutation来更新共享的数据。例如，点击按钮时通过commit方法触发setMessage mutation：

<template>
  <button @click="sendMessage">发送消息</button>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['setMessage']),
    sendMessage() {
      this.setMessage('Hello World')
    }
  }
}
</script>

3. 在接收组件中通过计算属性获取共享的数据。例如，在另一个组件中通过计算属性获取message值：

<template>
  <div>{{ receivedMessage }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['message']),
    receivedMessage() {
      return this.message
    }
  }
}
</script>

这样，当发送组件中点击按钮触发sendMessage方法时，接收组件就会获取到共享的数据并显示出来。

综上所述，Vue中兄弟组件之间传参可以通过props、事件总线、Vuex等方式来实现，选择哪种方式取决于具体的需求和场景。