字传父$emit vue2

在Vue中，子组件向父组件传递值可以通过使用$emit方法实现。通过$emit方法，子组件可以触发父组件中定义的事件，并将值作为参数传递给父组件。以下是一个简单的示例代码：

<div id="app">
  <child @cardnum="getInfo"></child>
</div>

<script>
Vue.component("child",{
  template:`
    <div style="padding:0px 10px 0px;margin-top:10px;border:1px solid #33495D">
      <p>child</p>
      <button @click="payment" style="margin-bottom:10px">打款</button>
    </div>
  `,
  data(){
    return{
      money:5000
    }
  },
  methods:{
    payment(){
      console.log("查询余额",this.money);
      this.$emit("cardnum",{money:this.money}); // 分发
      console.log("完成打款!")
    }
  }
})

new Vue({
  el:'#app',
  methods:{
    getInfo(cardInfo){
      console.log("已入帐",cardInfo)
    }
  }
})
</script>

在这个示例代码中，父组件通过@cardnum监听子组件触发的事件。当子组件中的按钮被点击时，会调用payment方法，并通过this.$emit("cardnum",{money:this.money})将值传递给父组件。父组件中的getInfo方法会接收到这个值，并进行相应的处理。这样，子组件就成功地将值传递给了父组件。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* *3* [第二十三篇 Vue中子传父 - $emit](https://blog.csdn.net/weixin_52203618/article/details/127560737)[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^chatsearchT0_1"}}] [.reference_item style="max-width: 100%"]
[ .reference_list ]