Vue3.0中如何監(jiān)聽props方法
更新時間:2022年04月18日 15:33:23 作者:LJJ_3
這篇文章主要介紹了Vue3.0中如何監(jiān)聽props方法,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
Vue3.0如何監(jiān)聽props
學習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)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
利用Vue v-model實現(xiàn)一個自定義的表單組件
本篇文章主要介紹了利用Vue v-model實現(xiàn)一個自定義的表單組件的相關知識。具有很好的參考價值。下面跟著小編一起來看下吧2017-04-04vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點
這篇文章主要介紹了vue雙向數(shù)據(jù)綁定原理分析、vue2和vue3原理的不同點,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12vue 導航守衛(wèi)和axios攔截器有哪些區(qū)別
這篇文章主要介紹了vue 導航守衛(wèi)和axios攔截器有哪些區(qū)別,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-12-12