Vue3.0中如何监听props方法

Vue3.0中如何监听props方法

目录

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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持易知道(ezd.cc)。

推荐阅读