vue3父子组件双向数据绑定v-model;父组件调用子组件事件

news2024/11/14 13:31:41

效果:
在这里插入图片描述

父far.vue

<template>
  <div>
    <div>
      父组件内容
      <pre>value1:{{ value1 }}</pre>
      <el-button type="primary">flag1:{{ flag1 }}</el-button>
      <pre>obj1:{{ obj1 }}</pre>
      <el-input v-model="obj1.name" placeholder=""></el-input>
    </div>

    <el-button type="primary" @click="getSonData">父组件触发子组件事件</el-button>


    <!-- :value1="value1" 是正常传值 -->
    <!-- v-model="flag1"  是匿名双向绑定 -->
    <!-- v-model:obj2="obj1" 是具名obj2双向绑定 -->
    <son ref="sonRef" :value1="value1" v-model="flag1" v-model:obj2="obj1"></son>


  </div>
</template>

<script setup>
import { ref } from "vue"
import son from './components/son.vue'
let value1 = ref('123')
let flag1 = ref(false)
let obj1 = ref({
  name: 'jack',
  age: 18
})


const sonRef = ref(null)
// 父组件触发子组件事件
const getSonData = () => {
  if (!sonRef.value) return
  sonRef.value.sonFun()
}
</script>

<style lang="scss" scoped></style>

子组件:son.vue

<template>
  <div style="margin-top: 100px;">
    子组件:{{ value1 }} {{ modelValue }} {{ obj2 }}
    <br>
    正常使用:<el-input v-model="value2" placeholder=""></el-input>
    <br>

    <el-button type="primary" @click="changeFlag">双向修改flag1:{{ localValue }}</el-button>

    <br>
    双向修改:<el-input v-model="obj3.name" placeholder="" @change="changeName"></el-input>
  </div>

</template>

<script script setup>
import { ref, defineOptions, defineProps, defineEmits, watch } from 'vue'

const emit = defineEmits(['value1', 'update:modelValue', 'update:obj2']);

defineOptions({
  name: " Son"
})
const props = defineProps({
  value1: {
    type: [String, Number],
    default: () => {
      return undefined
    }
  },
  modelValue: { // 父组件 v-model 时数据没有指定参数名,所以此时属性modelValue会接收到v-model变量 即 flag1
    type: Boolean,
    default: () => {
      return false
    }
  },
  obj2: { // 具名双向绑定
    type: Object,
    default: () => {
      return {}
    }
  },
})
let value2 = ref(props.value1)
let localValue = ref(props.modelValue || false)
let obj3 = ref(props.obj2 || {})
const changeFlag = () => {
  localValue.value = !localValue.value
  emit('update:modelValue', localValue.value) // 同步修改父组件的值
}
const changeName = () => {
  emit('update:obj2', obj3.value) // 同步修改父组件的值
}

// 监听属性变化
watch([() => props.modelValue, () => props.obj2], ([modelValue, obj2]) => {
  console.log(modelValue, obj2);
}, { deep: true, immediate: true })



// 子组件暴露给父组件的方法
const sonFun = () => {
  console.log('子组件暴露给父组件的方法', 1);
}
// 暴露
defineExpose({
  sonFun
})
</script>

<style lang="scss" scoped></style>

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java 入门指南:接口(Interface)

引言 在Java编程中&#xff0c;接口&#xff08;Interface&#xff09;是一种非常重要的概念&#xff0c;它不仅是面向对象编程&#xff08;OOP&#xff09;的基石之一&#xff0c;也是实现高内聚、低耦合设计原则的关键工具。接口定义了一组方法&#xff0c;但不提供这些方法…

@Mapper报红

检查pom.xml&#xff0c;导入 org.mybatis.spring.boot 依赖&#xff1a; <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.0.3</version></dependency…

Java-EE 网络编程(1)

目录 一、网络初识 二、协议 协议的定义 协议分层 协议分层的好处 TCP/IP五层模型 五层协议 协议之间如何配合工作的 三、网络编程套接字 TCP/UDP特点 UDP回显服务器 UDP的socket api 回显服务器 回显客户端 一、网络初识 先了解一些核心概念&#xff1a; 局域网…

CsvExport:一个.Net高性能、低内存的CSV导出开源库

在我们项目开发中&#xff0c;导出CSV数据功能是非常常见的。 今天推荐一个高性能、低内存的CSV导出开源库。 01 项目简介 CsvExport是一个基于C#非常简单和快速的CSV导出开源库。 该开源库的核心特点&#xff1a; 导出功能兼容性高&#xff08;自动检测分隔符&#xff0c;…

CSC7720 可正、负应用5V2.1A同步整流

CSC7720是一款同步整流芯片&#xff0c;可以代替肖特基二极管提高反激变换器的效率。CSC7720 支持工作在非连续模式&#xff08;DCM&#xff09;的反激变换器中&#xff0c;其内部集成了低 RDS&#xff08;ON &#xff09;的 N 沟道功率MOSFET&#xff0c;外围应用简单&#xf…

STM32—SPI通信

1.SPI简介 四根通信线&#xff1a;SCK(Serial Clock)(时钟线)、MOSI(Master Output Slave Input)、MISO(Master Input Slave Output)、SS(Slave Select) 同步、全双工 支持总线挂载多设备&#xff08;一主多从&#xff09; 所有SPI设备的SCK、MOSI、MISO分别连在一起 主机…

【Python学习-UI界面】PyQt5 小部件13-Slider 拖动条

高级布局管理器&#xff0c;允许通过拖动边界来动态改变子小部件的大小。 Splitter控件提供一个手柄&#xff0c;可以拖动以调整控件的大小 样式如下: 常用方法如下&#xff1a; 序号方法描述1addWidget将小部件添加到拆分器的布局中2indexOf返回布局中小部件的索引3insetW…

炖羊肉

炖羊肉必备的两种香辛料&#xff0c;白胡椒、白芷&#xff0c;让你炖出的羊肉软嫩&#xff0c;汤汁鲜美 在烹饪艺术的广阔领域中&#xff0c;炖羊肉作为一道经典佳肴&#xff0c;其风味的层次与深度往往取决于所选香辛料的精妙搭配。其中&#xff0c;白胡椒与白芷作为炖羊肉时…

fun状态上传,并可手动控制

文章目录 引言上传原因:矛盾点:基础工程源码: 代码实操fun状态上传fun状态下发控制 引言 上传原因: 续上一节, 我们把fun像小灯一样, 加入了预警工程, 但是我们fun其实还有其他用处, 比如我们人工手动开风扇, 排风, 所以我们需要把fun的状态上传, 然后也可以通过服务器手动控制…

EmguCV学习笔记 VB.Net 2.3 Mat类

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV学习笔记目录 Vb.net EmguCV学习笔记目录 C# 笔者的博客网址&#xff1a;VB.Net-CSDN博客 教程相关说明以及如何获得pdf教…

StackStorm自动化平台

1. StackStorm概述 1.1 StackStorm介绍 StackStorm是一个开源的事件驱动自动化平台&#xff0c;它允许开发者和系统管理员自动化IT和网络操作。StackStorm结合了IT运维、DevOps和网络安全团队的需求&#xff0c;提供了一个集中式的工作流自动化解决方案&#xff0c;包括事件响…

Windows10、ARM开发板、虚拟机Ubuntu可同时上网

一、Windows10端设置 1、打开网络配置 2、打开适配器 3、将window连接的wifi网卡设置为共享模式 4、查看本地连接的ip 到此&#xff0c;window10端设置完毕 二、设置虚拟机端&#xff08;Ubuntu&#xff09; 1、打开网络配置 2、打开适配器 3、查看本地连接的网卡名称 4、配置…

超越流水线,企业研发规范落地新思路

作者&#xff1a;子丑 内容大纲&#xff1a; 1、研发规范≠流程约束 2、自动化工具→研发规范载体 3、研发规范在工具上的落地示例 4、研发规范的选型方法与常见实践 研发规范≠流程约束 这个故事特别适合研发规范的场景&#xff0c;我们要避免成为把猫绑在柱子上的信众…

[NOIP2007 普及组] 守望者的逃离 题解

题意 给定 M ( 0 ≤ M ≤ 1 0 3 ) , S ( 1 ≤ S ≤ 1 0 8 ) , T ( 1 ≤ T ≤ 3 1 0 5 ) M(0 \leq M \leq 10^3),S(1 \leq S \leq 10^8),T(1 \leq T \leq 3\times 10^5) M(0≤M≤103),S(1≤S≤108),T(1≤T≤3105)&#xff0c;守望者开始在位置 0 0 0&#xff0c;对于每一秒&…

C++调用C#方法(附踩坑点)

C调用C#方法 写在前面效果思路步骤可能的问题 写在后面 写在前面 工作需要用C调用C#写到代码&#xff0c;看来网上写的方法&#xff0c;自己也踩了一些坑&#xff0c;这里总结一下&#xff0c;我只试了CLR的方法。 主要参考了下面几篇博客 C调用C#库简单例程&#xff08;Lucky…

【BUU】[NewStarCTF 2023 公开赛道]Final -CP读取文件内容

漏洞检测 访问首页发现是ThinkPHP5 的站点 用工具扫描一下,发现存在ThinkPHP5.0.23 RCE漏洞 访问验证,写入shell 成功写入shell. 根目录发现flag,但是权限不足 提权获取flag 准备提权,这里一开始尝试了find,但是find权限不足 尝试采用cp命令,移动到web目录,发现访问还是…

MySQL InnoDB中一个update语句从执行到提交的全过程(3)

接上文MySQL InnoDB中一个update语句从执行到提交的全过程&#xff08;2&#xff09;-CSDN博客 目录 六、本地提交 怎样保证binlog和redo log的状态一致呢&#xff1f; MySQL 中的内部 XA 机制 宕机时不同状态的处理 物理落盘策略 七、主备复制 八、返回提交成功 总结一…

Windows 10/11和Linux双系统用户请勿安装最新更新 否则将无法启动

据蓝点网报道&#xff0c;Windows 10/11 最新累积更新存在已知问题&#xff0c;如果你同时安装了 Linux 双系统则会在更新后导致系统无法正常启动。 启动时会出现如下报错&#xff1a; Verifiying shim SBAT data failed: Security Policy Violation.Something has gone serio…

私域场景中的数字化营销秘诀

​在当今的商业世界&#xff0c;私域场景的营销变得愈发重要。今天咱们就来深入探讨一下私域场景中的几个关键营销手段。 一、会员管理与营销 企业一旦拥有完善的会员体系&#xff0c;数字化手段就能大放异彩。它可以助力企业对会员进行精细划分&#xff0c;深度了解会员的消费…

win11笔记本电脑 声音输出设置为扬声器 | 添加蓝牙设备 | win11环境变量设置

&#x1f947; 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 &#x1f389; 声明: 作为全网 AI 领域 干货最多的博主之一&#xff0c;❤️ 不负光阴不负卿 ❤️ 文章目录 win11笔记本电脑 声音输出设置为扬声器搜索设置&#xff0c;打开设置选择声音选…