iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue3.0中如何监听props方法
  • 900
分享到

Vue3.0中如何监听props方法

2024-04-02 19:04:59 900人浏览 八月长安
摘要

目录vue3.0如何监听props第一种第二种Vue3.0监听props做数据回显Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个prop

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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: Vue3.0中如何监听props方法

本文链接: https://www.lsjlt.com/news/146386.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Vue3.0中如何监听props方法
    目录Vue3.0如何监听props第一种第二种vue3.0监听props做数据回显Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个prop...
    99+
    2024-04-02
  • Vue3.0中怎么监听props
    这篇文章主要讲解了“Vue3.0中怎么监听props”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue3.0中怎么监听props”吧!Vue3.0监听props的方法第一种直接监听这个pr...
    99+
    2023-06-30
  • vue3如何使用watch监听props中的数据
    目录情况一:监听 props 中基本数据类型情况二:监听 props 中引用数据类型且父组件不改变地址指向情况三:监听 props 中引用数据类型且父组件改变地址指向总结写在最后情况...
    99+
    2022-11-13
    vue3监听props数据变化 vue3 监听props vue props监听
  • vue中怎么监听scroll方法
    本篇文章为大家展示了vue中怎么监听scroll方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。问题今天想在vue的项目里面用下拉加载,然后就直接写了:但是我发现...
    99+
    2024-04-02
  • Oracle静态监听和动态监听的方法
    这篇文章主要介绍“Oracle静态监听和动态监听的方法”,在日常操作中,相信很多人在Oracle静态监听和动态监听的方法问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Orac...
    99+
    2024-04-02
  • vue中watch监听方法有哪些
    这篇文章主要为大家展示了“vue中watch监听方法有哪些”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue中watch监听方法有哪些”这篇文章吧。1.vue中的watch作用就如其命名就是监...
    99+
    2023-06-22
  • 如何监听Oracle
    这篇文章将为大家详细讲解有关如何监听Oracle,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Oracle 监听一:没有listener.ora监听文件监听文件liste...
    99+
    2024-04-02
  • 删除监听日志方法
    删除监听日志的方法如下:  切换到oracle用户    su - oracle  $lsnrctl set log_status off  $mv lis...
    99+
    2024-04-02
  • vue watch监听方法总结
    目录1.vue中的watch作用就如其命名就是监听的作用2.监听这个对象的属性3.监听这个对象的属性4.监听这个对象的属性在vue中,使用watch来响应数据的变化,关于watch的...
    99+
    2024-04-02
  • SpringBoot中如何使用监听器
    今天小编给大家分享一下SpringBoot中如何使用监听器的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。1.监听器web监听...
    99+
    2023-06-29
  • Vue中如何watch监听属性
    这篇文章主要介绍了Vue中如何watch监听属性,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。首先要确认 watch是一个对象,要当成对象来使用。键:就是那个,你要监听的那个...
    99+
    2023-06-21
  • 如何实现Spring事件发布监听、顺序监听和异步监听
    这篇文章给大家分享的是有关如何实现Spring事件发布监听、顺序监听和异步监听的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。1. Spring的事件通知Spring的事件通知本质上就是发布-订阅,即生产者-消费者...
    99+
    2023-06-22
  • SpringBoot中使用监听器的方法详解
    目录1.监听器2.SpringBoot中监听器的使用2.1 监听Servlet上下文对象2.2 监听HTTP会话Session对象总结1.监听器 web监听器是一张Servlet中特...
    99+
    2024-04-02
  • Vue监听的方法有哪些
    这篇“Vue监听的方法有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue监听的方法...
    99+
    2024-04-02
  • oracle监听无法启动如何解决
    若Oracle监听无法启动,可能是由于以下原因所致:1. 监听配置错误:请确认监听配置文件(listener.ora)中的监听地址、...
    99+
    2023-09-14
    oracle
  • jQuery如何监听事件?
    ...
    99+
    2024-04-02
  • vue如何取消监听
    在vue中取消监听的方法:1.新建项目,引入vue;2.使用window.addEventListener方法创建监听;3.使用window.removeEventListener方法取消监听;具体步骤如下:首先,新建一个html项目,并在...
    99+
    2024-04-02
  • vue如何监听对象
    在vue中监听对象的方法:1.新建项目,引入vue;2.定义监听对象;3.使用watch方法对对象进行监听;具体步骤如下:首先,新建一个html项目,并在项目中引入vue;import Vue from 'vue'引入vue后,在项目中定义...
    99+
    2024-04-02
  • Vue.js如何实现监听
    这篇文章主要为大家展示了“Vue.js如何实现监听”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue.js如何实现监听”这篇文章吧。demo:<scri...
    99+
    2024-04-02
  • vue如何监听路由
    在vue中监听路由的方法有:1.使用watch方法监听;2.使用watch方法监听路由变化,并获取路由信息;3.使用beforeEach方法全局监听;4.使用beforeRoute方法在组件内部监听具体方法如下:使用watch方法监听路由w...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作