$on和$emit兄弟组件传值

在Vue中，可以通过使用$emit和$on方法来实现父子组件之间的数据传输。通过$emit方法，子组件可以将数据发送给父组件，而通过$on方法，父组件可以监听并接收子组件发送的数据。 具体来说，子组件可以在需要传递数据的地方使用$emit方法，并在方法中指定一个自定义事件名称和要传递的数据。例如，在子组件中可以使用以下代码实现传递数据给父组件： ``` <button @click="btn">点击</button> methods: { btn() { this.$emit('father', 10) } } ``` 在上述代码中，子组件中的按钮点击事件会调用btn方法，并在方法中通过this.$emit('father', 10)来触发一个名为'father'的自定义事件，并传递数值10给父组件。 而在父组件中，可以通过在子组件元素上使用@father来监听该自定义事件，并在父组件的方法中接收传递的数据。例如，在父组件中可以使用以下代码来接收子组件传递的数据： ``` <child @father="add"></child> methods: { add(e) { console.log(e) } } ``` 在上述代码中，父组件通过监听子组件上的'father'自定义事件，并在add方法中接收传递的数据。在此例中，子组件通过this.$emit('father', 10)传递的数据10会在父组件的add方法中打印出来。 因此，通过使用$emit和$on方法，可以在Vue中实现父子组件之间的数据传输。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue中的$emit 与$on父子组件与兄弟组件的之间通信方式](https://download.csdn.net/download/weixin_38590989/12759856)[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: 33.333333333333336%"] - *2* [vue父子组件传值](https://blog.csdn.net/dtbk123/article/details/105643047)[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: 33.333333333333336%"] - *3* [Vue子组件向父组件传值（this.$emit()方法）](https://blog.csdn.net/weixin_42246997/article/details/104524727)[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: 33.333333333333336%"] [ .reference_list ]

$emit是Vue.js中用于组件之间传值的方法之一。它可以让子组件向父组件传递数据。下面是一个$emit组件传值的示例： 假设我们有两个组件，一个是父组件，另一个是子组件。子组件中有一个按钮，当点击按钮时，子组件会向父组件传递一个数据。具体实现步骤如下： 1.在子组件中定义一个方法，用于触发$emit事件，并传递数据。例如： ``` methods: { sendData() { this.$emit('eventName', data) } } ``` 其中，eventName是自定义的事件名，data是要传递的数据。 2.在父组件中监听子组件的$emit事件，并在回调函数中获取传递的数据。例如： ``` <template> <div> <child-component @eventName="handleEvent"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }, methods: { handleEvent(data) { console.log(data) } } } </script> ``` 其中，ChildComponent是子组件的名称，eventName是子组件中定义的事件名，handleEvent是父组件中定义的回调函数，用于获取子组件传递的数据。 以上就是一个简单的$emit组件传值的示例。需要注意的是，$emit和$on的事件必须在一个公共的实例上，才能够触发。