vue3实现父组件向子组件传值并监听props改变触发事件

最新推荐文章于 2025-10-14 10:50:30 发布

原创最新推荐文章于 2025-10-14 10:50:30 发布 · 3.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #vue

vue3 专栏收录该内容

2 篇文章

订阅专栏

文章讲述了在React和Vue框架中，如何从父组件向子组件传递参数，特别是使用`reactive`或`ref`定义的变量作为电话号码（tel）传递给子组件，并在子组件中通过`watch`监听并处理接收到的props值的过程。

1. 父组件

向子组件loginPhone传递tel参数 phone是在reactive定义的变量也可是是ref定义的变量

<loginPhone :tel="phone" />

2. 子组件

import { watch } from "vue";
export default {
  props: {
    tel: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    watch(
      props,
      (newProps) => {
        console.log(newProps) // 接收到的props的值
      },
      { immediate: true, deep: true }
    );
  }
}