Vue3.0中如何监听props方法
更新时间:2022年04月18日 15:33:23 作者:LJJ_3
这篇文章主要介绍了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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue3 HighCharts自定义封装之径向条形图的实战过程
highcharts是国外知名基于javascript的图表库,下面这篇文章主要给大家介绍了关于vue3 HighCharts自定义封装之径向条形图的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-09-09详解Vue、element-ui、axios实现省市区三级联动
这篇文章主要介绍了Vue、element-ui、axios实现省市区三级联动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2019-05-05vue3 setup语法糖中获取slot插槽的dom对象代码示例
slot元素是一个插槽出口,标示了父元素提供的插槽内容将在哪里被渲染,这篇文章主要给大家介绍了关于vue3 setup语法糖中获取slot插槽的dom对象的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-04-04vue3+vite+移动端webview打包后页面加载空白问题解决办法
这篇文章主要给大家介绍了关于vue3+vite+移动端webview打包后页面加载空白问题的解决办法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下2024-06-06详解vue使用vue-layer-mobile组件实现toast,loading效果
这篇文章主要介绍了详解vue使用vue-layer-mobile组件实现toast,loading效果,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08
最新评论