Vue3使用setup监听props实现方法详解

更新时间：2023年08月20日 16:13:06 作者：黄金原野

这篇文章主要为大家介绍了Vue3使用setup监听props实现方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

背景描述

子组件展示父组件传来的参数，展示的信息随着父组件上tab的切换动态更新。

一开始的想法是单独监听这个传递的参数，但看了VUE3的文档之后，似乎对参数的监听必须精确到属性。例如参数为

{
      name: 'Doctor',
      gender: 'Timelord'
}

需要在子组件的watch中写明监听的是name还是gender。
该参数中有很多可能会改变的属性，一一监听过于麻烦。所以改变思路，使用监听props来获取所有所有传参。

实现方法

在父组件中，用于传递给子组件的参数必须为响应式(eg. reactive)，否则子组件在监听时不会监测到变换，watch永远不会生效

immediate是立即开始监听，在页面首次渲染时可能为显示为undefined，如果watch的变化需要手动触发，不需要开启

deep默认开启，可以忽略（参数为reactive，会默认开启deep，如果是ref，则不会默认开启deep）

// 父组件
<script>
export default {
  setup() {
    let traveller = reactive({
      name: 'Doctor',
      gender: 'Timelord'
    })
  }
}
</script>

// 子组件
<script>
export default {
  props: {
    traveller: {
      type: Object
    }
  }
  setup(props) {
    watch(
            props,
            (old, newProps) => {
                console.log('=======', newProps); //这里看到新值
            },
            // {   
            //     immediate: true,
            //     deep: true
            // }
        )
  }
}
</script>

以上就是Vue3使用setup监听props实现方法详解的详细内容，更多关于Vue3 setup监听props的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
2018-10-10
Vue中Axios中取消请求及阻止重复请求的方法
为了防止用户在网络不好或者其他情况下短时间内重复进行接口请求，重复发送多次请求，本文主要介绍了Vue中Axios中取消请求及阻止重复请求的方法，感兴趣的可以了解一下
2022-02-02
vue中动态绑定表单元素的属性方法
下面小编就为大家分享一篇vue中动态绑定表单元素的属性方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
vue封装全局弹窗警告组件this.$message.success问题
这篇文章主要介绍了vue封装全局弹窗警告组件this.$message.success问题,具有很的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
vue-next-admin项目使用cdn加速详细配置
这篇文章主要为大家介绍了vue-next-admin项目使用cdn加速的详细配置，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06
基于Vuejs实现购物车功能
这篇文章主要为大家详细介绍了基于Vuejs实现购物车功能的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
如何在Vue 3中扩展Vue Router链接详解
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要给大家介绍了关于如何在Vue 3中扩展Vue Router链接的相关资料,需要的朋友可以参考下
2021-06-06
vue项目实现一键网站换肤效果实例(webpack-theme-color-replacer的使用)
换皮肤一般都是点击一个按钮弹出一些皮肤的选项,选中选项后皮肤生效,下面这篇文章主要给大家介绍了关于vue项目实现一键网站换肤效果的相关资料,文中主要介绍的是webpack-theme-color-replacer的使用,需要的朋友可以参考下
2023-02-02
Vue3中导航守卫的基本使用方法
这篇文章主要给大家介绍了关于Vue3中导航守卫的基本使用方法,正如其名vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航,下面需要的朋友可以参考下
2023-03-03
vue使用vue-video-player插件播放视频的步骤讲解
在最近的项目中有一个视频播放的功能,在之前的项目中没有接触过类似的功能,第一次接触,把具体操作步骤一下,这篇文章主要给大家介绍了关于vue使用vue-video-player插件播放视频的相关资料,需要的朋友可以参考下
2022-12-12