Vue父组件监听子组件值变化

子组件组件

1.通过this.$emit(‘方法’,监听的值)

this.$emit('changeName',this.nackName)

2.父组件

// 子组件
<component @changeName="nickName" />
// 父组件方法
 methods:{
     nickName(name) {
     // 给需要的地方赋值
     this.texts = name;
   		},
    },
  • 5
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue中,组件可以通过监听组件的生命周期来获取组件组件可以通过v-on指令监听组件触发的事件,并在事件处理函数中获取组件传递出来的。具体实现方式如下所示: 1. 组件通过v-on的方式声明自己要做的事件,并通过`$emit()`方法将需要传递给组件传递出来 。例如,在组件中使用`$emit()`方法触发一个名为`changeName`的事件,并将需要传递的作为参数传递出来。 2. 组件通过在组件上使用`v-on`指令来监听组件触发的事件 。例如,在组件中使用`@changeName`来监听组件触发的`changeName`事件。同时,在组件的方法中定义一个事件处理函数,该函数接收组件传递的作为参数。在事件处理函数中,可以对这个进行处理,并将其赋给需要的地方。 通过这种方式,组件就可以监听组件,并在适当的时候对其进行处理。这样可以实现组件组件监听和响应。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue组件监听组件生命周期](https://download.csdn.net/download/weixin_38633083/12923615)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [Vue组件监听组件的方法并接收组件的传](https://blog.csdn.net/qq_25983579/article/details/103051876)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vue组件监听组件变化](https://blog.csdn.net/weixin_46003800/article/details/116016379)[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_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值