Vue3.0中如何監(jiān)聽props方法
更新時間：2022年04月18日 15:33:23 作者：LJJ_3
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
Vue3.0如何監(jiān)聽props
學(xué)習(xí)vue3.0記錄下props監(jiān)聽：
第一種
直接監(jiān)聽這個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,
? ? };
? },
});第二種
監(jiān)聽里邊的某一個屬性
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監(jiān)聽props做數(shù)據(jù)回顯
<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: []
});
/*監(jiān)聽props*/
watch(props, (nweProps, oldProps) => {
for (let item in formState) {
formState[item] = nweProps.record[item];
}
});
return {
formState
};
}
})
</script>
<style scoped>
</style>
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了VeeValidate 的使用場景以及配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue樹形控件tree的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue?關(guān)于$emit與props的使用示例代碼
父組件使用 props 把數(shù)據(jù)傳給子組件，子組件使用 $emit 觸發(fā)父組件的自定義事件，今天通過示例給大家詳細(xì)介紹下Vue?關(guān)于$emit與props的使用，感興趣的朋友一起看看吧2022-03-03
這篇文章主要介紹了vue.js body的css不生效問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了Vue事件總線的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
本文主要介紹了VUE腳手架框架編寫簡潔的登錄界面的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
基于vue-router的matched實現(xiàn)面包屑功能
本文主要介紹了基于vue-router的matched實現(xiàn)面包屑功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本篇文章主要介紹了詳解 vue better-scroll滾動插件排坑，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
使用Element時默認(rèn)勾選表格toggleRowSelection方式
這篇文章主要介紹了使用Element時默認(rèn)勾選表格toggleRowSelection方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue中分割線的實現(xiàn)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-12-12