第二十五章 Vue父子通信之sync修饰符

news2024/11/6 5:11:44

目录

一、概述 

二、完整代码 

2.1. main.js

2.2. App.vue 

2.3. BaseDialog.vue 

三、运行效果


一、概述 

前面的章节我们讲到,通过v-model我们可以实现父子组件间的通信,但是使用v-model的时候,子组件接收的prop属性名必须固定为value,很多场景下我们可能需要自定义属性名,这个时候sync修饰符就可以满足我们的需求。

.sync 修饰符

作用:可以实现子组件父组件数据双向绑定,简化代码。

特点:prop属性名,可以自定义,非固定为 value

场景:封装弹框类的基础组件, visible属性 true显示 false隐藏

本质:就是 :属性名 @update:属性名 合写

父组件 (使用方式)

子组件 (封 装)

二、完整代码 

2.1. main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

2.2. App.vue 

<template>
  <div class="app">
    <button @click="openDialog">退出按钮</button>
    <!-- isShow.sync  => :isShow="isShow" @update:isShow="isShow=$event" -->
    <BaseDialog :isShow.sync="isShow"></BaseDialog>
  </div>
</template>

<script>
import BaseDialog from './components/BaseDialog.vue'
export default {
  data() {
    return {
      isShow: false,
    }
  },
  methods: {
    openDialog() {
      this.isShow = true
      // console.log(document.querySelectorAll('.box')); 
    },
  },
  components: {
    BaseDialog,
  },
}
</script>

<style>
</style>

2.3. BaseDialog.vue 

<template>
  <div class="base-dialog-wrap" v-show="isShow">
    <div class="base-dialog">
      <div class="title">
        <h3>温馨提示:</h3>
        <button class="close" @click="closeDialog">x</button>
      </div>
      <div class="content">
        <p>你确认要退出本系统么?</p>
      </div>
      <div class="footer">
        <button>确认</button>
        <button>取消</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isShow: Boolean,
  },
  methods:{
    closeDialog(){
      this.$emit('update:isShow',false)
    }
  }
}
</script>

<style scoped>
.base-dialog-wrap {
  width: 300px;
  height: 200px;
  box-shadow: 2px 2px 2px 2px #ccc;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 10px;
}
.base-dialog .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 2px solid #000;
}
.base-dialog .content {
  margin-top: 38px;
}
.base-dialog .title .close {
  width: 20px;
  height: 20px;
  cursor: pointer;
  line-height: 10px;
}
.footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 26px;
}
.footer button {
  width: 80px;
  height: 40px;
}
.footer button:nth-child(1) {
  margin-right: 10px;
  cursor: pointer;
}
</style>

三、运行效果

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

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

相关文章

头歌——机器学习(逻辑回归)

文章目录 逻辑回归简述代码 sklearn逻辑回归 - 手写数字识别代码 逻辑回归算法详解似然与概率的区别逻辑回归算法的代码实现代码 逻辑回归案例 - 癌细胞精准识别代码 逻辑回归简述 什么是逻辑回归 当一看到“回归”这两个字&#xff0c;可能会认为逻辑回归是一种解决回归问题的…

【高等数学】3-2多元函数积分学

1. 二重积分 可以想象你有一块不规则的平面薄板,它在一个平面区域上。二重积分就是用来求这个薄板的质量(假设薄板的面密度函数是)。 把区域划分成许多非常小的小方块(类似于把一块地划分成很多小格子),在每个小方块上,密度近似看成是一个常数,然后把每个小方块的质量加…

需求管理流程与工具:国内外10款综合评测

本文中&#xff0c;分享了10款需求管理工具&#xff1a;1.PingCode&#xff1b;2.Worktile&#xff1b;3.纷享销客&#xff1b;4.Teambition&#xff1b;5.Jira&#xff1b;6.Trello&#xff1b;7.Figma&#xff1b;8.万维需求管理&#xff1b;9.ClickUp&#xff1b;10.项目管理…

Java项目实战II基于Spring Boot的个人云盘管理系统设计与实现(开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、文档参考 五、核心代码 六、源码获取 全栈码农以及毕业设计实战开发&#xff0c;CSDN平台Java领域新星创作者&#xff0c;专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 基于Spring Boot的个人云盘管理系统设计…

嵌入式之C语言(基础篇)

首先&#xff0c;我们要知道什么是程序。程序&#xff1a;为了让计算机执行某操作或解决某个问题而编写的一系列有序指令的集合。 一、计算机语言简史 第一代是机器语言&#xff1a;时间实在1946年&#xff0c;第一台计算机ENIAC诞生&#xff0c;用的是穿孔卡片做的&#xff0c…

搜索引擎算法更新对网站优化的影响与应对策略

内容概要 随着互联网的不断发展&#xff0c;搜索引擎算法也在不断地进行更新和优化。了解这些算法更新的背景与意义&#xff0c;对于网站管理者和优化人员而言&#xff0c;具有重要的指导意义。不仅因为算法更新可能影响到网站的排名&#xff0c;还因为这些变化也可能为网站带…

牛客周赛65(C++实现)

比赛链接&#xff1a;牛客竞赛_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛_牛客竞赛OJ 文章目录 1.超市1.1 题目描述1.2 思路1.3 代码 2. 雨幕2.1 题目描述2.2 思路2.3 代码 3.闺蜜3.1 题目描述3.2 思路3.3 代码 4. 医生4.1 题目描述4.2 思路4.3 代码 1.超市 1.1 题目描述 …

【解决方案】微信小程序如何使用 ProtoBuf 进行 WebSocket 通信

前言 故事背景 简单说下背景&#xff0c;项目中需要用 ProtoBuf 协议转换请求参数&#xff0c;并通过 WebSocket 进行双向通信。重点&#xff01;一个是 web端&#xff08;Vue3 TS&#xff09;&#xff0c;一个是微信小程序端&#xff08;原生 JS&#xff09;。 剧情发展 …

练习LabVIEW第三十四题

学习目标&#xff1a; 刚学了LabVIEW&#xff0c;在网上找了些题&#xff0c;练习一下LabVIEW&#xff0c;有不对不好不足的地方欢迎指正&#xff01; 第三十四题&#xff1a; 在一个波形表中显示三条随机数组成的曲线&#xff0c;分别用红&#xff0c;绿&#xff0c;蓝三种…

rnn/lstm

tip&#xff1a;本人比较小白&#xff0c;看到july大佬的文章受益匪浅&#xff0c;现在其文章基础上加上自己的归纳、理解&#xff0c;以及gpt的答疑&#xff0c;如果有侵权会删。 july大佬文章来源&#xff1a;如何从RNN起步&#xff0c;一步一步通俗理解LSTM_rnn lstm-CSDN博…

Python | Leetcode Python题解之第528题按权重随机选择

题目&#xff1a; 题解&#xff1a; class Solution:def __init__(self, w: List[int]):self.pre list(accumulate(w))self.total sum(w)def pickIndex(self) -> int:x random.randint(1, self.total)return bisect_left(self.pre, x)

使用Python多线程抓取某图网数据并下载图片

前言 在互联网开发领域&#xff0c;数据抓取是一项非常实用的技术。通过数据抓取&#xff0c;我们可以从网页上获取所需的信息&#xff0c;并将其转化为结构化数据&#xff0c;以便进一步分析或使用。本文将介绍如何利用Python编写一个多线程程序来抓取网页上的图片数据&#…

SQL之排名窗口函数RANK()、ROW_NUMBER()、DENSE_RANK() 和 NTILE() 的区别(SQL 和 Hive SQL 都支持)

现有一张student 表&#xff0c;表中包含id、uname、age、score 四个字段&#xff0c;如下所示&#xff1a; 该表的数据如下所示&#xff1a; 一、ROW_NUMBER() 1、概念 ROW_NUMBER() 为结果集中的每一行分配一个唯一的连续整数&#xff0c;编号从 1 开始。‌ 该函数按照指…

Verilog HDL基础

模块的基本结构 module 模块名(端口列表); // 模块声明// 端口定义input [数据类型] [位宽] 输入端口列表; output [数据类型] [位宽] 输出端口列表; inout [数据类型] [位宽] 双向端口列表; // 数据类型定义wire [位宽] 线网名,线网名&#xff0c;…; …

C语言实验 选择结构

时间&#xff1a;2024.11.2 一、实验 实验一、7-1 计算分段函数[2] #include<stdio.h> #include<math.h> int main(){float x,r;scanf("%f",&x);if(x<0){rpow((x1.0),2)2*x1.0/x;}else rpow(x,0.5);printf("f(%.2f) %.2f",x,r);retu…

六、Go语言快速入门之数组和切片

文章目录 数组和切片数组:one: 数组初始化:two: 数组的遍历:three: 多维数组:four: 将数组传递给函数 切片(Slice):one: 切片的初始化:star: new和make区别 :two: 切片的使用:three: 将切片传递给函数:four: 多维切片:four: Bytes包:four: 切片和垃圾回收 &#x1f4c5; 2024年…

【Sublime Text】格式化Json和XML

无package control解决方案 删除文件中的package control这一行并保存 下载 下载中

vue常用的修饰符有哪些

1、修饰符是什么 在Vue 中&#xff0c;修饰符处理了许多 DOM 事件的细节&#xff0c;让我们不再需要花大量的时间去处理这些烦恼的事情&#xff0c;而能有更多的精力专注于程序的逻辑处理 vue中修饰符分为以下五种 汇总修饰符说明表单lazy光标离开标签的时候&#xff0c;才会…

微服务设计模式 - 发布订阅模式(Publisher Subscriber Pattern)

微服务设计模式 - 发布订阅模式&#xff08;Publisher Subscriber Pattern&#xff09; 定义 发布-订阅模式&#xff08;Publisher-Subscriber Pattern&#xff09;是一种常见的设计模式&#xff0c;被广泛用于云计算和分布式系统中&#xff0c;以实现松散耦合的组件间通信。发…

00-开发环境 MPLAB IDE 配置

MPLAB IDE V8.83 File 菜单简介 New (CtrlN)&#xff1a; 创建一个新文件&#xff0c;用于编写新的代码。 Add New File to Project...&#xff1a; 将新文件添加到当前项目中。 Open... (CtrlO)&#xff1a; 打开现有文件。 Close (CtrlE)&#xff1a; 关闭当前打开的文件。 …