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>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。