Vue3.0中如何监听props方法
时间:2022-07-30 10:55:08|栏目:vue|点击: 次
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>