Vue3.0中怎么监听props

这篇文章主要讲解了“Vue3.0中怎么监听props”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Vue3.0中怎么监听props”吧！

Vue3.0监听props的方法

第一种

直接监听这个props

export default defineComponent({   props: {     isOpen: Boolean,   },   emits: {     "close-modal": null,   },   setup(props, context) {     watch(       props,       (newProps) => {         console.log(newProps.isOpen); //这里看到新值       }     );     const closeModal = () => {       context.emit("close-modal");     };     return {       closeModal,     };   }, });

第二种

监听里边的某一个属性

export default defineComponent({   props: {     isOpen: Boolean,   },   emits: {     "close-modal": null,   },   setup(props, context) {     watch(       () => props.isOpen,       (newProps) => {         console.log(newProps);//查看新值       }     );     const closeModal = () => {       context.emit("close-modal");     };     return {       closeModal,     };   }, });

vue3.0监听props做数据回显

<template> </template> <script> import {defineComponent, reactive, watch} from 'vue'; export default defineComponent({   name: "from",   props: {     record: {       type: Object,       default: null,     }   },   setup: function (props, context) {     const formState = reactive({       headPic: '',       nickname: '',       password: '',       username: '',       roleDomainList: []     });     /*监听props*/     watch(props, (nweProps, oldProps) => {       for (let item in formState) {         formState[item] = nweProps.record[item];       }     });     return {       formState     };   } }) </script> <style scoped> </style>

感谢各位的阅读，以上就是“Vue3.0中怎么监听props”的内容了，经过本文的学习后，相信大家对Vue3.0中怎么监听props这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是亿速云，小编将为大家推送更多相关知识点的文章，欢迎关注！