Vue3.0中如何监听props方法

目录
  • Vue3.0如何监听props
    • 第一种
    • 第二种
  • 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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 子组件watch监听不到prop的解决

    问题描述 在vue项目中,父组件通过prop给子组件传值时,如果prop值是从服务器端获取,则父组件可能会传给子组件一个默认值(服务端数据还未及时获取),那么,我们就需要实时watch这个prop值,一旦prop值有更新,将立即通知子组件更新. 解决方案 watch: { levelDetail: { immediate: true, // 很重要!!! handler (val) { this.levelPersonal = !val ? {} : val // console.log('ac

  • vue中使用props传值的方法

    1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo

  • Vue中props用法介绍

    Vue中props用法介绍

    ​前言: 在Vue中通过props,可以将原本孤立的组件串联起来,也就是可以子组件可以接收父组件传递过来的data,比如子组件想要引用父组件的数据,那么在props里面声明一个变量,这个变量就可以引用父元素的数据. 实例演示: 子组件: <template> <div> <h3>我是{{name}},今年{{age}}岁,爱好:{{hobby}}</h3>,{{flag}} </div> </template> <script&

  • vue3父子组件传值中props使用细节浅析

    目录 setup函数的参数 一.父组件要给子组件传值时,可以通过props来完成组件的通信 二.子组件给父组件传值 总结 setup函数的参数 它主要有两个参数: 第一个参数:props :父组件传递过来的属性会被放到props对象中 第二个参数:context:包含3个属性 attrs:所有的非prop的attribute slots:父组件传递过来的插槽(这个在以渲染函数返回时会有作用,后面会讲到) emit:当我们组件内部需要发出事件时会用到emit 一.父组件要给子组件传值时,可以通过p

  • Vue3.0中如何监听props方法

    目录 Vue3.0如何监听props 第一种 第二种 vue3.0监听props做数据回显 Vue3.0如何监听props 学习vue3.0记录下props监听: 第一种 直接监听这个props export default defineComponent({   props: {     isOpen: Boolean,   },   emits: {     "close-modal": null,   },   setup(props, context) {     watch(

  • vue3如何使用watch监听props中的数据

    vue3如何使用watch监听props中的数据

    目录 情况一:监听 props 中基本数据类型 情况二:监听 props 中引用数据类型且父组件不改变地址指向 情况三:监听 props 中引用数据类型且父组件改变地址指向 总结 写在最后 情况一:监听 props 中基本数据类型 父组件中对传入数据的处理 const handleClick = () => { testStr.value += 'P' } 子组件中监听传入的数据 watch( () => props.testStr, (newVal, oldVal) => { cons

  • vue3.0中使用postcss-pxtorem的具体方法

    postcss-pxtorem是PostCSS的插件,用于将像素单元生成rem单位. 前端开发还原设计稿的重要性毋庸置疑,目前应用的单位最多还是rem,然而每次在制作过程中需要自己计算rem值,为了能够直接按照设计图的尺寸开发,并且能自动编译转换成rem,下面就来分享下postcss-pxtorem的使用. 1.安装依赖 npm install postcss-pxtorem -D 2.设置规则(更改postcss.config.js,该文件为使用vue-cli3自动创建的文件) module.

  • vue3.0中的watch侦听器实例详解

    vue3.0中的watch侦听器实例详解

    目录 前言 侦听器和计算属性的区别 vue3如何使用watch呢? 基本使用 监听多个响应式数据 侦听reactive定义的响应式数据 监听reactive定义的响应式数据的某一个属性 配置选项用法 总结 前言 虽然计算属性在大多数情况下更合适,但有时也需要一个自定义的侦听器.这就是为什么 Vue 通过watch选项提供了一个更通用的方法,来响应数据的变化.当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的. 侦听器和计算属性的区别 计算属性里不可以做异步操作,侦听器可以做异步操作

  • Vue3中watch监听对象的属性值(监听源必须是一个getter函数)

    目录 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 2. 原因 3.watch源码分析 4.doWatch源码分析 5.总结 Vue3 中使用 watch 侦听对象中的具体属性 1.前言 <script lang="ts" setup> // 接受父组件传递的数据 const props = defineProps({ test: { type: String, default: '' } }) // 使用 watch 侦听 props 中的 test 属性

  • iOS开发中Swift3 监听UITextView文字改变的方法(三种方法)

    在项目中使用文本输入框出UITextField之外还会经常使用 UITextView ,难免会有需求监听UITextView文本框内文本数量.下面介绍在swift3中两种常用方式 方式一: 全局通知 1.注册通知 在合适位置注册监听UITextView文本变化的全局通知 //UITextView 监听开始输入的两种方法 //方法一:通知 NotificationCenter.default.addObserver(self, selector: #selector(ComposeVC.textV

  • php中Socket创建与监听实现方法

    本文实例讲述了php中Socket创建与监听实现方法.分享给大家供大家参考.具体如下: 这里提供了在php中socket相关函数的一个实例,如创建Socket,接受一个socket连接 ,写入一个Socket及初始化连接等操作,具体实例代码如下: 复制代码 代码如下: $ip="127.0.0.1";          //定义ip地址 $port=1000;           //定义端口 $socket=socket_create(af_inet,sock_stream,sol_

  • Vue3中watch监听使用详解

    Vue3中watch监听使用详解

    目录 Vue2使用watch Vue3使用watch 情况1 情况2 情况3 情况4 情况5 特殊情况 总结 Vue2使用watch <template> <div>总合:{{ sum }}<button @click="sum++">点击累加</button></div> </template> <script> import { ref } from "vue"; export

  • Android4.0.x Home键事件拦截监听的方法

    本文实例讲述了Android4.0.x Home键事件拦截监听的方法.分享给大家供大家参考,具体如下: 在2.3.x 的主要做法如下,具体实现网上有很多文章 @Override public void onAttachedToWindow() { this.getWindow().setType(WindowManager.LayoutParams.TYPE_KEYGUARD); super.onAttachedToWindow(); } 代码移植到4.0.1后 this.getWindow()

  • vue3.0中的双向数据绑定方法及优缺点

    熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object.defineProperty的缺点: 1. 在Vue中,Object.defineProperty无法监控到数组下标的变化, 导致直接通过数组的下标给数组设置值,不能实时响应. push() pop() shift() unsh

随机推荐