$bus.$emit父子之间传值

你可以使用 Vue 的事件总线 `$bus`（或者更常见的是 `$emit` 和 `$on`）来在父组件和子组件之间传递值。下面是一个简单的示例：

在父组件中，使用 `$emit` 来触发一个自定义事件，并传递值给子组件：

// 父组件
export default {
  methods: {
    sendDataToChild() {
      const data = '传递给子组件的值';
      this.$bus.$emit('custom-event', data);
    }
  }
}

在子组件中，使用 `$on` 来监听父组件触发的事件，并接收传递的值：

// 子组件
export default {
  created() {
    this.$bus.$on('custom-event', data => {
      console.log(data); // 输出：传递给子组件的值
    });
  }
}

确保在适当的生命周期钩子函数中使用 `$on`，以便在父组件触发事件后能够正确地接收到值。同时，也要确保在适当的时候使用 `$off` 来取消监听事件，以避免内存泄漏。

希望这个示例对你有帮助！如果还有其他问题，请随时提问。

相关问题

$bus.$emit和$emit区别

通过引用和[2]的内容，可以得出以下结论：

- `$bus.$emit`是Vue中的一个方法，用于触发自定义事件。它的语法是`this.$bus.$emit('eventName', data)`，其中`eventName`是自定义事件的名称，`data`是要传递给监听器的数据。当调用`$emit`方法时，会触发所有监听该事件的回调函数，并将数据传递给这些回调函数。
- `$emit`是Vue中的一个全局方法，用于触发组件实例上的事件。它的语法是`vm.$emit('eventName', data)`，其中`vm`是组件实例，`eventName`是事件的名称，`data`是要传递给监听器的数据。当调用`$emit`方法时，会触发该组件实例上绑定的事件监听器，并将数据传递给这些监听器。

简而言之，`$bus.$emit`是在Vue实例的原型上定义的方法，用于触发自定义事件；而`$emit`是Vue实例上的方法，用于触发组件实例上的事件。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [组件传值:父子$emit,props.兄弟$bus.$on.$emit,](https://blog.csdn.net/wangyangzxc123/article/details/121457851)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [[vue] 全局事件总线 this.$bus.$emit this.$bus.$on ，可以实现任意组件间通信](https://blog.csdn.net/qq_14993591/article/details/121221114)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]

vue中 组件间的传值的理解？（父子，子父及非父子的传值）

在 Vue 中，组件间的传值可以通过 `props`、`$emit`、`$parent`、`$children`、`$attrs`、`$listeners` 等方式进行。

1. 父子组件之间的传值：

父组件可以通过 `props` 向子组件传递数据，子组件可以通过 `$emit` 触发事件向父组件传递数据。

例如，父组件向子组件传递一个名字：

<template>
  <div>
    <child-component :name="name" @change-name="changeName"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      name: 'Vue'
    }
  },
  methods: {
    changeName (newName) {
      this.name = newName
    }
  }
}
</script>

子组件接收父组件传递的数据，并通过 `$emit` 触发事件向父组件传递数据：

<template>
  <div>
    <p>父组件传递的名字：{{ name }}</p>
    <button @click="changeName">修改名字</button>
  </div>
</template>
<script>
export default {
  props: {
    name: String
  },
  methods: {
    changeName () {
      this.$emit('change-name', 'Vue.js')
    }
  }
}
</script>

2. 子父组件之间的传值：

子组件可以通过 `$parent` 访问父组件的数据和方法，并通过 `$emit` 触发事件向父组件传递数据。

例如，子组件向父组件传递一个消息：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage () {
      this.$parent.showMessage('Hello, Vue.js')
    }
  }
}
</script>

父组件接收子组件传递的数据，并展示消息：

<template>
  <div>
    <p>{{ message }}</p>
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: {
    ChildComponent
  },
  data () {
    return {
      message: ''
    }
  },
  methods: {
    showMessage (message) {
      this.message = message
    }
  }
}
</script>

3. 非父子组件之间的传值：

非父子组件之间的传值可以通过一个空的 Vue 实例作为中央事件总线（Event Bus）来实现。

首先，创建一个空的 Vue 实例：

// EventBus.js
import Vue from 'vue'
export default new Vue()

然后，在需要传递数据的组件中，通过 `import` 引入 EventBus，并使用 `$emit` 触发事件：

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

最后，在接收数据的组件中，也通过 `import` 引入 EventBus，并使用 `$on` 监听事件：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
import EventBus from './EventBus'
export default {
  data () {
    return {
      message: ''
    }
  },
  created () {
    EventBus.$on('message', (message) => {
      this.message = message
    })
  }
}
</script>

这样，就可以实现非父子组件之间的传值了。