vue父组件监听子组件值

在Vue中，父组件可以通过使用v-on指令来监听子组件的值。通过在父组件的模板中使用v-on指令，并指定事件名称和回调函数，可以监听子组件发出的事件。子组件可以通过在需要发出事件的地方使用this.$emit方法来触发事件，并将需要传递的值作为参数传递给父组件。父组件的回调函数将接收到子组件传递的值，并可以在回调函数中进行相应的处理。

例如，父组件可以使用以下方式来监听子组件的值：
<component @changeName="handleNameChange" />
在父组件的methods中，定义一个handleNameChange方法来处理子组件发出的changeName事件，并接收子组件传递的值作为参数。在这个方法中，可以对接收到的值进行逻辑处理，或者将其赋值给其他变量。
methods: {
handleNameChange(name) {
this.texts = name;
}
}
子组件可以通过在需要发出事件的地方使用this.$emit方法来触发changeName事件，并将需要传递的值作为参数传递给父组件。
this.$emit('changeName', this.nickName)
这样，当子组件发出changeName事件时，父组件的handleNameChange方法将被调用，并接收到子组件传递的nickName值。父组件可以在handleNameChange方法中对接收到的值进行处理，或者将其赋值给其他变量。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [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: 50%"]
- *2* *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: 50%"]
[ .reference_list ]