vue监听子组件并向父组件传参父组件接收并渲染（监听--子传父）（无触发事件）

小强，逞强的强

于 2021-06-08 11:31:04 发布

阅读量833

点赞数 1

分类专栏：前端文章标签： vue vue.js html

本文链接：https://blog.youkuaiyun.com/weixin_44693565/article/details/117693830

版权

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue中实现子组件监听div值的变化，并将变化值实时传递给父组件。子组件通过`watch`对象监听`formateTime`属性，当值变化时触发`$emit`事件发送给父组件。父组件接收到变化值后更新对应的属性，并在页面上展示。这是一个关于Vue组件通信和数据流管理的实例。

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

项目场景：

监听div值的变化监听传值

子组件：

监听div值的变化
子组件代码：

<div v-text="formateTime"></div>

watch: {
    // 监听并向父组件传值
    formateTime: {
      handler: function (val, oldval) {
        console.log("改变后日期", val, "初始日期", oldval);
        this.$emit("changeformateTime", val);
      },
      //immediate默认是false 改为true让他先去执行里面的handler方法，如果不写将不显示监听的初始值
        immediate: true //初始值执行handler
    },
  },

父组件：

        <div class="calendar-wrap" :class="fullToggle ? 'full-calendar' : ''">
          <canlen @changeformateTime="changewdformateTime"></canlen>
        </div>
        <div>{{ wdmateTime }}</div>

import canlen from "../../components/test_canlen/calendar";

export default {
  components: {
    canlen,
  },

data () {
  return {
      // 当前日期
      wdmateTime: "",
      }
}

 methods: {
    // 我的日历传值
    changewdformateTime(val) {
      this.wdmateTime = val;
      console.log(val);
    },
    }