vue非父子组件传值, 非父子组件传值背景
1. 使用全局事件总线（Event Bus）: 创建一个新的 Vue 实例作为事件总线。 在一个组件中使用 `$emit` 方法触发事件，并在另一个组件中使用 `$on` 方法监听这个事件。
2. 使用 Vuex: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 你可以在 Vuex 中定义全局状态，并在组件中通过 `mapState` 或 `mapGetters` 辅助函数来访问这些状态。
3. 使用 Vue 的 provide / inject API: `provide` 选项允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。 `inject` 选项允许一个子孙组件接收祖先组件提供的数据。
4. 使用 Vue 的 `attrs` 和 `listeners`: 如果你的组件是作为一个根组件或者中间组件的子组件被使用，并且你想要传递数据到更深层级的子组件，你可以使用 `$attrs` 和 `$listeners`。
5. 使用 `$root`: 在 Vue 的根实例上添加数据，并在其他组件中通过 `this.$root` 访问这些数据。
6. 使用 `$parent` 或 `$children`: 在某些情况下，如果你知道组件的父子关系，可以使用 `$parent` 或 `$children` 来访问父组件或子组件的数据。
7. 使用 props / $emit: 虽然这种方法通常用于父子组件之间的通信，但如果你能找到一种方式将一个组件嵌入到另一个组件中，你也可以使用 props 和 $emit 来实现非父子组件之间的通信。
9. 使用第三方库: 有一些第三方库，如 `EventEmitter` 或 `mitt`，可以简化事件总线模式的使用。
选择哪种方法取决于你的应用的具体需求和复杂性。对于大型应用，通常推荐使用 Vuex 或提供/注入，因为这些方法可以更好地组织和管理状态。对于小型应用或简单的场景，事件总线可能就足够了。
Vue非父子组件传值详解
在Vue.js的开发过程中，组件之间的通信是必不可少的。除了父子组件之间的通信，非父子组件之间的数据传递也是常见的场景。本文将详细介绍Vue中非父子组件传值的方法，帮助开发者更好地理解和应用这一技术。
非父子组件传值背景
在Vue中，组件之间的关系可以分为父子关系和非父子关系。父子组件之间通过props和events进行通信，而非父子组件之间则没有直接的父子关系，因此需要通过其他方式来实现数据传递。
非父子组件传值方法
1. 使用事件总线（Event Bus）
事件总线是一种简单且常用的非父子组件传值方法。它通过创建一个全局的事件管理器，使得组件之间可以通过事件监听和触发来实现数据传递。
实现步骤：
1. 创建一个事件总线对象，通常是一个Vue实例。
2. 在需要发送数据的组件中，使用`$bus.$emit('事件名', 数据)`来触发事件。
3. 在需要接收数据的组件中，使用`$bus.$on('事件名', 回调函数)`来监听事件，并在回调函数中处理数据。
示例代码：
```javascript
// 创建事件总线
const bus = new Vue();
// 发送数据的组件
bus.$emit('data-event', { message: 'Hello from Child!' });
// 接收数据的组件
bus.$on('data-event', (data) => {
console.log(data.message); // 输出：Hello from Child!
2. 使用Vuex
Vuex是Vue.js官方的状态管理模式和库，它通过集中存储管理所有组件的状态，实现组件之间的状态共享。
实现步骤：
1. 在Vuex的store中定义全局状态。
2. 在需要修改状态的组件中，使用`this.$store.commit('mutationName', 数据)`来提交mutation。
3. 在需要获取状态的组件中，使用`this.$store.state.stateName`来获取数据。
示例代码：
```javascript
// Vuex store
const store = new Vuex.Store({
state: {
message: 'Hello from Vuex!'
},
mutations: {
updateMessage(state, payload) {
state.message = payload;
}
// 发送数据的组件
store.commit('updateMessage', { message: 'Hello from Child!' });
// 接收数据的组件
console.log(store.state.message); // 输出：Hello from Child!
3. 使用$refs
在Vue中，父组件可以通过`$refs`属性访问子组件的实例，从而实现非父子组件之间的数据传递。
实现步骤：
1. 在父组件中，通过`ref`属性为子组件设置一个引用名。
2. 在父组件中，使用`this.$refs.引用名`来访问子组件的实例。
3. 在子组件中，通过`this.$parent`来访问父组件的实例，并使用`this.$parent.$refs.引用名`来访问父组件的实例。
示例代码：
```javascript
// 父组件
