vue 父页面监听子页面值的变化

2023-12-23 18:13:33

在Vue中,可以通过使用$emit()来触发事件并传递数据。

首先,需要在父组件中定义一个自定义事件名称,然后将该事件与相应的处理函数关联起来。当子组件改变了其值时,就会调用这个处理函数。

下面是一个示例代码:

<!-- 父组件 -->
<template>
  <div>
    <!-- ...其他内容... -->
    
    <!-- 子组件 -->
    <child-component @valueChanged="handleValueChange"></child-component>
  </div>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue'; // 导入子组件
 
export default {
  components: {
    'child-component': ChildComponent // 注册子组件
  },
  
  methods: {
    handleValueChange(newValue) {
      console.log('新的值为', newValue);
      
      // 进行其他操作或更新状态等
    }
  }
}
</script>
<!-- 子组件 ChildComponent.vue -->
<template>
  <input type="text" v-model="internalValue">
</template>
 
<script>
export default {
  data() {
    return {
      internalValue: ''
    };
  },
  
  watch: {
    internalValue(newVal) {
      this.$emit('valueChanged', newVal); // 触发自定义事件并传递新的值
    }
  }
};
</script>

上述代码中,父组件通过@valueChanged监听子组件的valueChanged事件,并指定了对应的处理函数handleValueChange。当子组件的输入框的值发生变化时,会触发watch属性中的internalValuewatcher,从而调用this.$emit('valueChanged', newVal)来触发自定义事件,同时也传递了新的值newVal。最后,父组件接收到事件后,会打印出新的值,并且还可以根据需求进行其他操作或者更新状态等。

文章来源:https://blog.csdn.net/weixin_41662207/article/details/135170442
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。