react和vue2/3父子组件的双向绑定

目录

Vue

.sync(2.3.0+)

$emit (2.3后)

自定义组件的 v-model 2.2.0+

v-model+emits(3.0取消了.sync)

React

父组件回调函数

相关基础

框架

MVC (Model View Controller)/MVP(Model View Presenter)

MVVM (Model View View Model)

React和Vue区别


Vue

.sync(2.3.0+

//父组件
<template>
    <TestCom :num.sync="data"></TestCom>
</template>
<script>
export default({
  components: {
    TestCom,
  },
  data() {
    return {
      data:2
    }  
  },
});
</script>


//子组件
<template>
  <div>
    <button @click="cahngeNum">按钮</button>
    {{ num }}
  </div>
</template>

<script>
export default({
  props: {
    num: {
      default: "",
      type: String,
    },
  },
  methods: {
    cahngeNum() {
      this.$emit("update:num", 999); // 触发update:data将子组件值传递给父组件
    },
  },
});
</script>

$emit (2.3后)

<template>
  <div>
    <!-- 子组件模板 -->
    <button @click="updateVisibility">Toggle Visibility</button>
  </div>
</template>

<script>
export default {
  methods: {
    updateVisibility() {
      const newVisibility = !this.visibility;
      this.$emit('visibility-change', newVisibility);
    }
  },
  props: ['visibility']
};
</script>
<template>
  <div>
    <!-- 父组件模板 -->
    <child-component :visibility="visibility" @visibility-change="handleVisibilityChange" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      visibility: false
    };
  },
  methods: {
    handleVisibilityChange(newVisibility) {
      this.visibility = newVisibility;
    }
  }
};
</script>

自定义组件的 v-model 2.2.0+

<input v-model="searchText">
语法糖 等价于:
<input
  :value="searchText"
  @input="searchText = $event.target.value"
>
<template>
  <div>
    <label for="message">Message:</label>
    <input type="text" id="message" v-model="userMessage" />
    <p>Entered message: {{ userMessage }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userMessage: '' // 初始值为空
    };
  }
};
</script>

当用户在输入框中输入文本时,userMessage 的值会实时更新,

并且当 userMessage 的值改变时,输入框中的值也会自动更新。

v-model 在内部相当于使用 :value @input 来实现数据的绑定监听

v-model+emits(3.0取消了.sync)

// 父组件
<template>
    <div>
        // 父组件传递给子组件num属性(默认使用modelValue)
        <child v-model:num = data></child>
    </div>
</template>
<script>
    data(){
      return {
        data:'我是来自父组件的数据'
      }
    }
</script>


//子组件
<template>
  <div>
    <button @click="cahngeNum">按钮</button>
    {{ num }}
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  emits: ["update:num"],
  props: {
    num: {
      default: "",
      type: String,
    },
  },
  setup(props, { emit }) {
    function cahngeNum() {
      emit("update:num", 999); 
    }
    return { cahngeNum };
  },
});
</script>

React

父组件回调函数

import React, { useState } from 'react';

function ParentComponent() {
  const [visibility, setVisibility] = useState(false);

  // 父组件中的回调函数,用于接收子组件传递的更新数据
  const handleVisibilityChange = (newVisibility) => {
    setVisibility(newVisibility);
  };

  return (
    <div>
      {/* 将属性和回调函数传递给子组件 */}
      <ChildComponent visibility={visibility} onVisibilityChange={handleVisibilityChange} />
    </div>
  );
}
import React from 'react';

function ChildComponent({ visibility, onVisibilityChange }) {
  // 子组件中的事件处理函数,用于更新属性并调用回调函数
  const handleVisibilityToggle = () => {
    const newVisibility = !visibility;
    onVisibilityChange(newVisibility);
  };

  return (
    <div>
      {/* 子组件根据需要使用属性 */}
      <button onClick={handleVisibilityToggle}>Toggle Visibility</button>
    </div>
  );
}

vue父子组件之间双向数据绑定的(vue2/vue3)_vue3父子组件双向绑定_前端一枚的博客-CSDN博客

相关基础

框架

MVC (Model View Controller)/MVP(Model View Presenter)

  • Model(模型):提供数据
  • View(视图):显示数据
  • Controller/Presenter(控制器):负责逻辑的处理,

MVVM (Model View View Model)

视图业务逻辑分开。

ViewModel 是它们双向绑定的桥梁,自动同步更新

【优点】

相比mvp各层的耦合度更低,一个viewmodel层可以给多个view层共用(一对多),提高代码的可重用性

*耦合度:模块间依赖的程度。

【缺点】

因为使用了dataBinding,增加了大量的内存开销,增加了程序的编译时间,所以适合轻量级项目。

数据绑定使得 Bug 很难被调试。你看到界面异常了,有可能是你 View 的代码有 Bug,也可能是 Model 的代码有问题

React和Vue区别

React和Vue都用了MVVM,父组件传给子组件的props都不允许子组件修改

React单向数据流:只能由数据层的变化去影响视图层的变化

但Vue提供了双向数据绑定的语法糖($emit,v-model)

在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示组件实例

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/39024.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

西安丨高时空分辨率、高精度一体化预测技术之风、光、水能源自动化预测技术应用

目录 ​第一章 预测平台讲解及安装 第二章 一体化预测工具详解与数据获取及制备 第三章 风资源预测自动化技术 第四章 太阳能资源自动化预测技术 第五章 水资源自动化预测技术 第六章 后处理自动化技术 更多推荐 能源是国民经济发展和人民生活必须的重要物质基础。在过去…

大数据存储架构详解:数据仓库、数据集市、数据湖、数据网格、湖仓一体

前言 本文隶属于专栏《大数据理论体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见大数据理论体系 思维导图 数据仓库 数据仓库是一个面向主题的&…

Python自动化之pytest常用插件

目录 1、失败重跑 pytest-rerunfailures 2、多重校验 pytest-assume 3、设定执行顺序 pytest-ordering 4、用例依赖&#xff08;pytest-dependency&#xff09; 5.分布式测试(pytest-xdist) 6.生成报告&#xff08;pytest-html&#xff09; 1、失败重跑 pytest-rerunfailu…

华夏ERP在虚拟机Ubuntu上的安装(测试实例)

1.虚拟机软件VirtualBOX 7.0 2.Ubuntu 版本 3.宝塔面板安装 百度搜索宝塔面板&#xff0c;按官网提示进行安装。下面截图是官网示例。 if [ -f /usr/bin/curl ];then curl -sSO download.cnnbt.net/install_panel.sh;else wget -O install_panel.sh download.cnnbt.net/install…

EasyCVR告警类型设置后首页需要刷新才能更新的问题优化

EasyCVR视频融合平台基于云边端一体化架构&#xff0c;可支持多协议、多类型设备接入&#xff0c;包括&#xff1a;NVR、IPC、视频编码器、无人机、车载设备、智能手持终端、移动执法仪等。平台具有强大的数据接入、处理及分发能力&#xff0c;可在复杂的网络环境中&#xff0c…

【C++初阶】构造函数和析构函数

文章目录 一、类的六个默认成员函数二、构造函数三、析构函数 一、类的六个默认成员函数 &#x1f4d6;默认成员函数 用户没有显式实现&#xff0c;编译器会自动生成的成员函数&#xff0c;称为默认成员函数。 构造函数&#xff1a;完成对象的初始化工作。析构函数&#xff…

动态sql语句

1.1 动态sql语句概述 Mybatis 的映射文件中&#xff0c;业务逻辑复杂时&#xff0c; SQL是动态变化的&#xff0c;此时在前面的学习中 SQL 就不能满足要求了。 参考的官方文档&#xff1a; 1.2 动态 SQL 之<if> 根据实体类的不同取值&#xff0c;使用不同的 SQL语句…

园区能源控制管理系统

园区能源控制管理系统是一种能够实现对园区内能源消耗、供应和分配进行实时监控、管理和控制的系统。该系统通过对园区内各种能源设备的数据采集、处理和分析&#xff0c;为管理者提供实时的能源使用情况和数据分析&#xff0c;从而帮助管理者制定科学的能源管理策略和节能措施…

3Ds max图文教程:高精度篮球3D建模

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 第 1 步。使用以下设置在顶部视口上创建球体&#xff1a; 第 2 步。将球体转换为可编辑的多边形&#xff1a; 第 3 步。转到 Edge 子对象级别并剪切以下边缘&#xff1a; 第 4 步。选择以下边&#xff0c;然…

github 最简单的使用步骤(个人学习记录~)

github 使用步骤&#xff1a; (11条消息) github新手用法详解&#xff08;建议收藏&#xff01;&#xff01;&#xff01;&#xff09;_github详解_怪 咖的博客-CSDN博客 1.获取ssh密钥 打开输入&#xff1a;ssh-keygen -t rsa -C “git账号” 输入之后一路Enter&#xff08…

Kubernetes Service的过程

文章目录 Kubernetes Service的实现基础内容1. 命令 ip route show table all2. DNAT3. IPVS和iptables4. Service Service的实现简述 Kubernetes Service的实现 基础内容 在了解Service之前,需要先了解一些额外的知识: 命令: ip route show table allDNATIPVS和iptables基础…

【云原生】K8S单节点搭建

Kubernetes Kubernetes基础概念架构1、基础环境2、安装kubelet、kubeadm、kubectl 2、使用kubeadm引导集群1、下载各个机器需要的镜像2、初始化主节点 Kubernetes核心实战Pod Kubernetes基础概念 kubernetes具有以下特性&#xff1a; ● 服务发现和负载均衡 Kubernetes 可以使…

EasyCVR录像阈值配置未生效,是什么原因?

有用户反馈&#xff0c;在平台中设置了录像阈值不生效&#xff0c;导致磁盘爆满。针对该反馈&#xff0c;我们立即进行了排查。 EasyCVR基于云边端一体化架构&#xff0c;可支持多协议、多类型设备接入&#xff0c;在视频能力上&#xff0c;平台可实现视频直播、录像、回放、检…

小白带你学习Linux的rsync的基本操作(二十四)

目录 前言 一、概述 二、特性 1、快速 2、安全 三、应用场景 四、数据的同步方式 五、rsync传输模式 六、rsync应用 七、rsync命令 1、格式 2、选项 3、举例 4、配置文件 5、练习 八、rsyncinotfy实时同步 1、服务器端 2、开发客户端 前言 Rsync是一个开源的…

分布式应用之zookeeper集群+消息队列Kafka

一、zookeeper集群的相关知识 1.zookeeper的概念 ZooKeeper是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是Google的Chubby一个开源的实现&#xff0c;是Hadoop和Hbase的重要组件。它是一个为分布式应用提供一致性服务的软件&#xff0c;提供的功能…

【深入探究人工智能】:历史、应用、技术与未来

深入探究人工智能 前言人工智能的历史人工智能的应用人工智能的技术人工智能的未来当代的人工智能产物结语&#x1f340;小结&#x1f340; &#x1f389;博客主页&#xff1a;小智_x0___0x_ &#x1f389;欢迎关注&#xff1a;&#x1f44d;点赞&#x1f64c;收藏✍️留言 &am…

软件渗透测试真的很重要吗?渗透测试有哪些测试流程?

软件渗透测试是指通过模拟恶意攻击者的行为&#xff0c;评估软件系统中的潜在安全漏洞和弱点的活动。这种安全测试方法能够帮助开发人员和系统管理员发现并修复潜在的安全漏洞&#xff0c;以确保软件系统的安全性和完整性。软件渗透测试是一项高度技术性的任务&#xff0c;需要…

Docker 基本管理

Docker 基本管理 一&#xff1a;Docker 概述1.容器化越来越受欢迎&#xff0c;因为容器是&#xff1a;2.Docker与虚拟机的区别&#xff1a;3.Docker核心概念&#xff1a; 二&#xff1a;安装 Docker1.安装依赖包2.设置阿里云镜像源3.安装 Docker-CE并设置为开机自动启动4.查看 …

Storage、正则表达式

1 LocalStorage 2 SessionStorage 3 正则表达式的使用 4 正则表达式常见规则 5 正则练习-歌词解析 6 正则练习-日期格式化 Storage-Storage的基本操作 // storage基本使用// 1.token的操作let token localStorage.getItem("token")if (!token) {console.log(&q…

SpringBoot读取配置的6种方式

1. 概述 通过了解springboot加载配置&#xff0c;可以更方便地封装自定义Starter。 在SpringBoot中&#xff0c;可以使用以下6种方式读取 yml、properties配置&#xff1a; 使用Value注解&#xff1a;读取springboot全局配置文件单个配置。使用Environment接口&#xff1a;通过…