Vue3.0中如何监听props方法
短信预约 -IT技能 免费直播动态提醒
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: []
});
watch(props, (nweProps, oldProps) => {
for (let item in formState) {
formState[item] = nweProps.record[item];
}
});
return {
formState
};
}
})
</script>
<style scoped>
</style>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
