vue之子组件监听父组件传值

最新推荐文章于 2025-05-27 10:11:08 发布

浏览器翻译官~

最新推荐文章于 2025-05-27 10:11:08 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

文章标签：监听父组件传值

本文链接：https://blog.csdn.net/lbPro0412/article/details/106921610

前端vue技术点干货分享专栏收录该内容

77 篇文章 ¥99.90 ¥299.90

订阅专栏

这篇博客介绍了在Vue中，子组件如何监听并处理父组件传递过来的值，提供了一个简单的示例帮助理解这一过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在工作过程中，经常碰见自己封装的组件需要监听父组件传过来的值，很有可能是在子组件需要对值进行处理，有不少同学不知道如何处理这个值，以下是简单demo，仅供参考。。。

父组件：

<template>
  <div>
    <el-button type="success" @click="handelClick">点击</el-button>
    <modalCom :isDisplay="isDisplay" @close="close" :propsData="propsData" />
  </div>
</template>

<script>
import modalCom from "./modalCom.vue";
export default {
  components: { modalCom },
  data() {
    return {
      isDisplay: false,
      num: 1,
      propsData: {}
    };
  },
  methods: {
    close(data) {
      console.log(data);
      this.isDisplay = data;
    },
    handelClick() {
      this.isDisplay = true;
      console.log(this.isDisplay, 999);
      this.num++; //加加  自定义对象值
      const data = {
        name: "赵四",
        num:

了解本专栏