字传父$emit传值

在Vue中，使用$emit可以实现子组件向父组件传值的功能。在子组件中，通过调用$emit方法触发一个自定义事件，并传递需要传递的值作为参数。父组件通过使用@符号绑定该事件，并在对应的方法中接收子组件传递的值。

例如，在父组件中，我们可以定义一个子组件并监听其自定义事件，如下所示：

<template>
  <div>
    <child @childFn="transContent"></child>
    子组件传来的值：{{message}}
  </div>
</template>

在子组件中，我们可以通过点击按钮并调用$emit方法传递消息给父组件：

<template>
  <div>
    <button @click="click">Send</button>
    <input type="text" v-model="message">
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '子组件的消息'
    }
  },
  methods: {
    click() {
      this.$emit('childFn', this.message);
    }
  }
}
</script>

在父组件的methods中定义一个transContent方法来接收子组件传递的值，并将该值赋给父组件的message属性。

这样，当子组件中的按钮被点击时，子组件会通过$emit方法触发childFn事件，并将message作为参数传递给父组件。父组件中的transContent方法会捕获该值并将其赋给message属性，从而实现子组件向父组件传值的功能。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [Vue组件之间$emit传值(子传父)和组件切换](https://blog.csdn.net/y17757773039/article/details/127350012)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [vuejs使用$emit和$on进行组件之间的传值的示例](https://download.csdn.net/download/weixin_38644688/13193971)[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^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]