Vue子向父事件传值:$emit

本文详细介绍了在Vue.js中如何实现父子组件之间的通信。子组件通过$emit触发'updateTitle'事件并传递参数,通知父组件更新标题。父组件接收到事件后,使用@updateTitle监听器来接收参数并修改自身的title属性。这种通信方式是Vue.js中组件间交互的基础,也是构建复杂应用的关键。
摘要由CSDN通过智能技术生成

子向父传值,需要在子组件使用$emit注册一个事件A,告诉父组件,此刻我希望你执行这个事件,并传递参数给你
父组件接收子想要执行这个事件的要求,开始处理

子组件注册事件updateTitle:

  methods:{
      changeTitle:function(){
        this.$emit("updateTitle","子向父传值")
      }
  }

父组件接收v-on:updateTitle,接收的参数传递给$event,执行updateTitle函数;将title改成子传过来的数据:

<div id="app">
    <app-header v-bind:title="title" v-on:updateTitle="updateTitle($event)"></app-header>
    <h1>{{title1}}</h1>
    <user v-bind:users="users"></user>
    <user v-bind:users="users"></user>
    <app-footer v-bind:title="title"></app-footer>
  </div>
  methods:{
    updateTitle(title){
      this.title = title
    }
  }
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值