当前位置: 首页 > news >正文

Vue开发之父子组件

创建父子组建,分三步。一是创建文件,二是引入组建,三是组件间通信。在components目录下新建sub文件夹,用于存放一下可以复用的子组件。比如新建一个SubCon.vue组件

<template><div class="first-app">{{ msg }}<button @click="getButtonClick">{{ text || '确认' }}</button></div>
</template>
<script>
export default {name: 'Confirm',props: ['text'],data () {return {msg: 'sub compontsppp'}},methods: {getButtonClick () {this.$emit('message', this.msg)}}
}
</script>
<style scoped>
</style>

父组件的代码如下:

<template><div class="hello"><h1>{{ msg }}</h1>test<h2>Essential Links</h2><Confirm text="注册" @message="getMessage"></Confirm></div>
</template>
<script>
import Confirm from './Sub/Confirm'export default {name: 'First',components: {Confirm},data () {return {msg: 'Welcome tssso Your Vue.js App111111111'}},methods: {getMessage (val) {alert(val)}}
}
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>h1, h2 {font-weight: normal;}ul {list-style-type: none;padding: 0;}li {display: inline-block;margin: 0 10px;}a {color: #42b983;}
</style>

即可创建父子组建,并实现了组建间的通信问题

创建新的组件,在index.js中别忘了添加引入:

import Second from '@/components/Second'

相关文章:

Vue开发之父子组件

创建父子组建&#xff0c;分三步。一是创建文件&#xff0c;二是引入组建&#xff0c;三是组件间通信。在components目录下新建sub文件夹&#xff0c;用于存放一下可以复用的子组件。比如新建一个SubCon.vue组件 <template><div class"first-app">{{ ms…...

fastadmin think-queue supervisor配置

起因是微信支付回调需要同时做发货处理&#xff0c;但是发货接口不能影响,需要队列进行异步处理1. 1.fastadmin 后台购买queue插件(基于think-queue消息队列) 2.代码 2.1 添加文件&#xff1a;application---->extra--->queue.php 内容&#xff1a;我这里用的数据库做…...

STM32 进不了main 函数

1. 我用的是STM32L151C8T6 的芯片&#xff0c;在github 上找了个别人的例程&#xff0c;拿来当模板改&#xff0c;由于他用的是HSE 外部晶振&#xff0c;我用的是内部晶振HSI&#xff0c;所以需要改系统时钟&#xff0c;改完后debug&#xff0c; 一直进不了main 函数&#xff0…...

不用循环数组,js+html实现贪吃蛇

功能描述&#xff1a;每走10步随机改变一个方方向&#xff0c;当键盘按下方向键 w,s,a,d时&#xff0c;使用键盘方向控制蛇的移动&#xff0c;蛇头每撞到一次自身时改变屏幕颜色&#xff0c;蛇头碰到边界时从另一边回来。 实现思路&#xff1a;用个30大小的数组存放每个结点&a…...

什么是线程安全和线程不安全?

线程安全(Thread Safety)和线程不安全(Thread Unsafety)是与并发编程相关的概念,特别是在多线程环境中使用共享资源时会涉及到这些概念。 线程安全: 当多个线程同时访问共享资源时,如果在没有额外的同步措施的情况下,这些线程仍然能够正确地执行并保持数据的一致性,那…...

VUE笔记(十)Echarts

一、Echarts简介 1、什么是echarts ECharts是一款基个基于 JavaScript 的开源可视化图表库 官网地址&#xff1a;Apache ECharts 国内镜像&#xff1a;ISQQW.COM x ECharts 文档&#xff08;国内同步镜像&#xff09; - 配置项 示例&#xff1a;echarts图表集 2、第一个E…...

FPGA原理与结构——时钟IP核原理学习

一、前言 在之前的文章中&#xff0c;我们介绍了FPGA的时钟结构 FPGA原理与结构——时钟资源https://blog.csdn.net/apple_53311083/article/details/132307564?spm1001.2014.3001.5502 在本文中我们将学习xilinx系列的FPGA所提供的时钟IP核&#xff0c;来帮助我们进一…...

创建python环境——Anaconda

在Windows中安装Anaconda和简单使用 一.Anaconda发行概述 Anaconda是一个可以便捷获取和管理包&#xff0c;同时对环境进行统一管理的发行版本&#xff0c;它包含了conda、 Python在内的超过180个科学包及其依赖项。 1.Anaconda发行版本具有以下特点&#xff1a; (1)包含了…...

使用Linux部署Kafka教程

目录 一、部署Zookeeper 1 拉取Zookeeper镜像 2 运行Zookeeper 二、部署Kafka 1 拉取Kafka镜像 2 运行Kafka 三、验证是否部署成功 1 进入到kafka容器中 2 创建topic 生产者 3 生产者发送消息 4 消费者消费消息 四、搭建kafka管理平台 五、SpringBoot整合Kafka 1…...

pyechart笔记:opts.AxisOpts

定制化图表的轴线&#xff08;x轴和y轴&#xff09;的样式和设置 0 不设置坐标轴 c1(Bar().add_xaxis([力量,智力,敏捷]).add_yaxis(全能骑士,# 系列名称&#xff0c;用于 tooltip 的显示&#xff0c;legend 的图例筛选。[429,321,296],#系列数据).add_yaxis(猴子,[352,236,4…...

深度思考rpc框架面经之五:rpc熔断限流、rpc复用连接机制

11 RPC框架如何实现限流和熔断 推荐文章&#xff1a;RPC实现原理之核心技术-限流熔断 11.1 为什么Dubbo要做服务的限流&#xff1f;(根本原因是服务端进行自我保护) 限流是一种常见的系统保护手段。在分布式系统和微服务架构中&#xff0c;一个接口的过度使用可能会导致资源…...

Go 数组

数组用于在单个变量中存储相同类型的多个值&#xff0c;而不是为每个值声明单独的变量。 声明数组 在Go中&#xff0c;有两种声明数组的方式&#xff1a; 使用var关键字&#xff1a; 语法 var array_name [length]datatype{values} // 这里定义了长度 或者 var array_n…...

04架构管理之分支管理实践-一种git分支管理最佳实践

专栏说明&#xff1a;针对于企业的架构管理岗位&#xff0c;分享架构管理岗位的职责&#xff0c;工作内容&#xff0c;指导架构师如何完成架构管理工作&#xff0c;完成架构师到架构管理者的转变。计划以10篇博客阐述清楚架构管理工作&#xff0c;专栏名称&#xff1a;架构管理…...

D.OASIS City 和 Warrix 在The Sandbox 庆祝 Rise of the 10th Legend十周年

D.OASIS 首次展示了变革性娱乐 D.OASIS City&#xff0c;正如它与 WARRIX 一起承诺的那样。WARRIX 是获得泰国国家队球衣生产授权的标志性运动服装品牌。 这款激动人心的游戏冒险游戏于今天推出&#xff0c;让用户能够投入 D.OASIS City x WARRIX&#xff1a;Rise of the 10th…...

Git基本操作(Idea版)

第一次发布项目&#xff08;本地->远程&#xff09; 方式一 通过push的方式推送本地库到远程库&#xff08;远程已创建好仓库&#xff09; 这种方式需要提前创建好仓库。 右键点击项目&#xff0c;可以将当前分支的内容 push 到 GitHub 的远程仓库中。 注意&#xff1a…...

NSS [羊城杯 2020]easyser

NSS [羊城杯 2020]easyser 开题。很容易让人觉得环境坏了。 不要慌&#xff0c;无从下手时。看源码、扫目录、抓包。一套操作下来&#xff0c;发现几个可以下手的路由。 /index.php /robots.txt 访问 /star1.php&#xff0c;一说到百度&#xff0c;就猜测是否存在SSRF。 源码中…...

理解底层— —Golang的log库,二开实现自定义Logger

理解底层— —Golang的log库&#xff0c;实现自定义Logger 1 分析实现思路 基于golang中自带的log库实现&#xff1a;对日志实现设置日志级别&#xff0c;每天生成一个文件&#xff0c;同时添加上前缀以及展示文件名等 日志级别&#xff0c;通过添加prefix&#xff1a;[INFO]、…...

RabbitMQ---Spring AMQP

Spring AMQP 1. 简介 Spring有很多不同的项目&#xff0c;其中就有对AMQP的支持&#xff1a; Spring AMQP的页面&#xff1a;http://spring.io/projects/spring-amqp 注意这里一段描述&#xff1a; Spring-amqp是对AMQP协议的抽象实现&#xff0c;而spring-rabbit 是对协…...

C语言练习题解析:挑战与突破,开启编程新篇章!(2)

&#x1f493;博客主页&#xff1a;江池俊的博客⏩收录专栏&#xff1a;C语言刷题专栏&#x1f449;专栏推荐&#xff1a;✅C语言初阶之路 ✅C语言进阶之路&#x1f4bb;代码仓库&#xff1a;江池俊的代码仓库&#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐ 文…...

sqlite3 加密访问

关于sqlite3 加密 一、相关加密用到的sqlcipher 1.1 sqlcipher 是一个数据库加密的开源库 sqlcipher开源地址 我这边是使用的docker镜像&#xff0c;镜像地址&#xff1a; https://hub.docker.com/r/pallocchi/sqlcipher 加密格式 docker run -v <workdir>:/sqlcip…...

AI Agent在智能风控中的实战:多智能体欺诈检测与预警

AI Agent在智能风控中的实战:多智能体欺诈检测与预警 你有没有过明明是正常交易却被银行冻结账户的糟糕体验?或是听说过某电商平台上线新活动首日就被黑产团伙薅走数千万补贴的新闻?随着黑产欺诈向团伙化、专业化、动态化演进,传统依赖规则引擎、单模型机器学习的风控体系已…...

诚信标签工厂端解决方案 适配俄标 CRPT 体系一体化技术方案

俄罗斯诚实标签依托 CRPT 体系执行强制管控&#xff0c;各类出口货品必须完成 Data Matrix 编码采集、格式转换、多层包装数据绑定&#xff0c;数据合规后方可通关流通。美妆食品、日化建材、玩具五金等品类包装形态差异较大&#xff0c;人工采集方式普遍存在识别精度不足、批量…...

从电磁炉到户外电源:拆解单相SVPWM如何让你的逆变器更安静、更高效

从电磁炉到户外电源&#xff1a;单相SVPWM如何实现静音与高效的双重突破当你深夜用电磁炉煮面时&#xff0c;是否曾被突然的蜂鸣声吓一跳&#xff1f;或是发现户外电源给设备充电时&#xff0c;散热风扇的噪音盖过了山林鸟鸣&#xff1f;这些常见问题背后&#xff0c;隐藏着一个…...

UOS系统下WPS卸载不干净?手把手教你用命令行精准清理(附dpkg/apt组合拳)

UOS系统下WPS卸载不干净&#xff1f;手把手教你用命令行精准清理 在UOS系统日常使用中&#xff0c;WPS Office作为常用办公软件&#xff0c;有时因版本更新或功能调整需要彻底卸载。但不少用户发现&#xff0c;通过图形界面或简单命令卸载后&#xff0c;系统中仍残留配置文件、…...

如何快速掌握开源UE资产编辑器:UAssetGUI完整配置与实战指南

如何快速掌握开源UE资产编辑器&#xff1a;UAssetGUI完整配置与实战指南 【免费下载链接】UAssetGUI A tool designed for low-level examination and modification of Unreal Engine game assets by hand. 项目地址: https://gitcode.com/gh_mirrors/ua/UAssetGUI UAss…...

Windows Cleaner深度解析:5大核心模块彻底解决系统空间不足问题

Windows Cleaner深度解析&#xff1a;5大核心模块彻底解决系统空间不足问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner Windows Cleaner是一款完全免费开源的…...

Taotoken如何帮助教育科技产品实现个性化学习辅导

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Taotoken如何帮助教育科技产品实现个性化学习辅导 1. 场景与挑战 教育科技公司在开发个性化学习助手时&#xff0c;常常面临一个核…...

FairyGUI Unity鼠标悬停与点击对象获取原理与实战

1. 这不是“加个OnMouseEnter就能用”的事&#xff1a;FairyGUI在Unity中处理鼠标交互的真实困境很多人第一次在Unity里集成FairyGUI&#xff0c;想实现“鼠标悬停显示提示”或“点击高亮当前按钮”&#xff0c;下意识就去翻Unity的MonoBehaviour文档&#xff0c;找OnMouseEnte…...

深度解析网络设备权限管理工具:中兴光猫工厂模式与Telnet服务完整指南

深度解析网络设备权限管理工具&#xff1a;中兴光猫工厂模式与Telnet服务完整指南 【免费下载链接】zteOnu A tool that can open ZTE onu device factory mode 项目地址: https://gitcode.com/gh_mirrors/zt/zteOnu 在当今网络设备管理领域&#xff0c;获取设备完整控制…...

操作符从浅入深的讲解

1. 操作符的分类 2. ⼆进制和进制转换 3. 原码、反码、补码 4. 移位操作符 5. 位操作符&#xff1a;&、|、^、~ 6. 单⽬操作符 7. 逗号表达式 8. 下标访问[]、函数调⽤() 9. 结构成员访问操作符 10. 操作符的属性&#xff1a;优先级、结合性 11. 表达式求值1.操作符的分类以…...