目录vue3.0如何监听props第一种第二种Vue3.0监听props做数据回显Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个prop
学习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,
};
},
});
<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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: Vue3.0中如何监听props方法
本文链接: https://www.lsjlt.com/news/146386.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0