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

Vue2（组件开发）

news 2026/4/1 7:00:49

前言

上一章博客我们讲解了Vue生命周期,列表过滤,计算属性和监听器
这一章我们来讲Vue组件开发

一，组件的使用

创建组件两种方式

var Header = { template:'模板' , data是一个函数,methods:功能,components:子组件们 
}//局部声明Vue.component('组件名',组件对象);//全局注册 等于注册加声明了

组件的分类

通用组件（例如表单、弹窗、布局类等) (多个项目都可以复用)
业务组件（抽奖、机器分类）（本项目中复用）
页面组件（单页面开发程序的每个页面的都是一个组件、只完成功能、不复用）

组件开发三部曲：声明、注册、使用

注意：子组件的命名，如果有驼峰命名，在使用子组件标签时用“-”隔开

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye></saybyebye></div><template id="myhello"><div>hello,{{name}}</div></template>
</body>
<script src="../js/vue2.7.js"></script>
<script>// 注册了一个全局组件，名字叫helloVue.component('hello',{template:`#myhello`,data(){return{name:'我是hello'}}})// 定义一个局部组件var saybyebye={template:`<div>你好</div>`}var app = new Vue({el:'#app',data(){return{name:"张三",}},// 注册局部组件components:{saybyebye}})</script>
</html>

在这里插入图片描述

二，插槽slot

slot就是在声明子组件时给DOM留下的坑位，以便于父组件在使用子组件的时候可以在坑位里动态的插入自己的内容。

并且，坑位是可以命名的，也就是说，子组件在声明的时候命名坑位，方便父组件在指定的坑位中插入内容

slot是动态的DOM

插槽的使用：
- 步骤有两步：a.子组件上留坑。b.父组件使用子组件的时候，给坑里赋值.
- 要有父子组件作为前提。
- 目的是让子组件成为动态的组件。

匿名插槽
- 匿名插槽就是在声明的时候没有声明name，会把全部内容都显

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye><div>我是插槽的内容</div></saybyebye></div><template id="myhello"><div>hello,{{name}}</div></template>
</body>
<script src="../js/vue2.7.js"></script>
<script>// 注册了一个全局组件，名字叫helloVue.component('hello',{template:`#myhello`,data(){return{name:'我是hello'}}})// 定义一个局部组件var saybyebye={template:`<div><div>你好</div>// 插槽内容<slot></slot>    </div>`}var app = new Vue({el:'#app',data(){return{name:"张三",}},// 注册局部组件components:{saybyebye}})</script>
</html>

在这里插入图片描述
具名插槽

具名插槽会在声明时，指定name。会在子组件中有选择的进行展示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,{{name}}<hello></hello><saybyebye><div slot="niu1">我是插槽的内容</div><template #niu2><div>你好niu2</div></template><template v-slot:niu3><div>你好niu3</div></template></saybyebye></div><template id="myhello"><div>hello,{{name}}</div></template>
</body>
<script src="../js/vue2.7.js"></script>
<script>// 注册了一个全局组件，名字叫helloVue.component('hello',{template:`#myhello`,data(){return{name:'我是hello'}}})// 定义一个局部组件var saybyebye={template:`<div><slot name="niu1"></slot>   <div>你好niu1</div>// 插槽内容<slot name="niu2"></slot>    <slot name="niu3"></slot>    </div>`}var app = new Vue({el:'#app',data(){return{name:"张三",}},// 注册局部组件components:{saybyebye}})</script>
</html>

在这里插入图片描述

三，refs和parent

这两个属性的作用是获取到子组件实例数组和父组件实例。
有了实例，就可以很方便的操作组件的属性和方法。

refs

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{name}}<button @click="ouda">打一顿</button><Myheader ref="dawa"></Myheader></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}</div>`,data(){return{xingming:'林宇豪',Hp:100,}},}var app = new Vue({el:'#app',data(){return{name:'小豪',}},methods:{ouda(){console.log("孽子，打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10},},components:{Myheader}})</script>
</html>

在这里插入图片描述

parent

$refs的使用需要，在子元素上通过ref属性声明自己的引用名称

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好,我是{{name}}<Myheader ref="dawa"></Myheader><Myheadererwa ref="erwa" ></Myheadererwa></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div></div>`,}var Myheadererwa = {template:`<div><button @click="jiao">叫爷爷</button>  </div>`,data(){return{ }},methods:{jiao(){this.$parent.name="爷爷"},  },}var app = new Vue({el:'#app',data(){return{name:'小豪',}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

四，父子组件间的通信

4.1，父传子：父传子的时候，通过属性传递

在子组件标签中，自定义属性和值

<Myheader ref="header" age="18" :sex="sex"></Myheader>

在子组件内部，通过props属性，获取所有的值

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{name}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}</div>`,data(){return{xingming:'林宇豪',Hp:100,}},}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{name:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子，打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌，安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

4.2，父组件监听自定义事件

      <Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa>

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="chuanzhi">发送一条信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}}}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  <button @click="happyNewYear">给爷爷拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},happyNewYear(){// 触发自定义事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子，打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌，安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },bainian(xingming){console.log(xingming+"给您拜年了 ");}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

五，非父子组件的通信

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="chuanzhi">发送一条信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}}}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  <button @click="happyNewYear">给爷爷拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},happyNewYear(){// 触发自定义事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子，打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌，安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },bainian(xingming){console.log(xingming+"给您拜年了 ");}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

创建一个公共组件

Vue.prototype.$middleBus = new Vue();

发送方，在公共组件上，触发一个事件

this.$middleBus.$emit('sendMsg','你好child01,我是child02');

接收方，监听公共组件上的这个事件，并接受数据

this.$middleBus.$on('sendMsg',val=>{// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01this.msg = val;
});

六，混入（mixin）

定义
- 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项
写法
- 局部
  - 定义个混入对象


var myMixin = {data() {return {mixinname: '混入姓名',};},mounted() {console.log('我是混入的组件');},
};

项目

mixins: [myMixin],

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app">大家好{{changname}}<button @click="ouda">打一顿</button><button @click="anwei">安慰</button><button @click="xiaodao">看看导哥在干嘛</button><Myheader ref="dawa"></Myheader><Myheadererwa @to-parent-event="bainian" ref="erwa" age="2" :nengli="nengli2"></Myheadererwa><div id="mydiv"></div></div>
</body>
<script src="../js/vue2.7.js"></script>
<script>Vue.prototype.$middleBus = new Vue();var commonMixin = {data(){return{mixinName:'葫芦'}},mounted(){console.log( "混入对象" +this.mixinName);}}var Myheader = {template:`<div>子组件{{xingming}}--{{Hp}}---{{mixinName}}<button @click="chuanzhi">发送一条信息</button>    </div>`,data(){return{xingming:'林宇豪',Hp:100,}},methods:{chuanzhi(){this.$middleBus.$emit('jieshou','你好child01,我是child02');}},mixins:[commonMixin]}var Myheadererwa = {template:`<div>子组件{{xingming}}--{{Hp}}<button @click="jiao">叫爷爷</button>  <button @click="happyNewYear">给爷爷拜年</button>  二娃 = {{age}} -- {{nengli}}</div>`,data(){return{ xingming:'王导',Hp:0,}},methods:{see(){console.log("再看岛国动作片");},jiao(){this.$parent.name="爷爷"},happyNewYear(){// 触发自定义事件this.$emit('to-parent-event',this.xingming)}},mounted(){this.$middleBus.$on('jieshou',val=>{// 使用箭头函数，可以不改变this的指向，仍然和外部的this保持一致，指向child01console.log(val);});},props:['age','nengli'],}var app = new Vue({el:'#app',data(){return{changname:'小豪',nengli2:"千里眼,顺风耳"}},methods:{ouda(){console.log("孽子，打一顿");this.$refs.dawa.Hp = this.$refs.dawa.Hp - 10// if(this.$refs.dawa.Hp<=0){//     document.getElementById("#mydiv").innerHTML="已经死了不能在死了爹"// }},anwei(){console.log("抽了一巴掌，安慰了一下");this.$refs.erwa.Hp = this.$refs.erwa.Hp + 10},xiaodao(){this.$refs.erwa.see()            },bainian(xingming){console.log(xingming+"给您拜年了 ");}},components:{Myheader,Myheadererwa}})</script>
</html>

在这里插入图片描述

全局混入

定义个混入对象
引入使用

Vue.mixin(myMixin);

注意

当组件和混入对象含有同名选项时，这些选项将进行“合并”
在选项发生冲突时以组件数据优先
请谨慎使用全局混入，因为会使实例以及每个组件受影响

最后

祝大家： 愿每个人都能遵循自己的时钟，做不后悔的选择。

Vue2（组件开发）

目录前言一，组件的使用二，插槽slot三，refs和parent四，父子组件间的通信4.1，父传子 ：父传子的时候，通过属性传递4.2，父组件监听自定义事件五，非父子组件的通信六&#x…...

编程日记 2023/8/17 6:43:59

（二）结构型模式：8、代理模式（Proxy Pattern）（C++示例）

目录 1、代理模式（Proxy Pattern）含义 2、代理模式的UML图学习 3、代理模式的应用场景 4、代理模式的优缺点 5、C实现代理模式的实例 1、代理模式（Proxy Pattern）含义代理模式（Proxy），为…...

编程日记 2023/8/17 6:42:58

代码审计-ASP.NET项目-未授权访问漏洞

代码审计必备知识点： 1、代码审计开始前准备： 环境搭建使用，工具插件安装使用，掌握各种漏洞原理及利用,代码开发类知识点。 2、代码审计前信息收集： 审计目标的程序名，版本，当前环境(系统,中间件…...

编程日记 2023/8/17 6:41:57

爬虫逆向实战（十四）--某培训平台登录

一、数据接口分析主页地址：某培训平台 1、抓包通过抓包可以发现登录是表单提交到j_spring_security_check 2、判断是否有加密参数请求参数是否加密？ 通过查看“载荷”模块可以发现有一个j_password加密参数请求头是否加密？ 无响应是…...

编程日记 2023/8/17 6:40:56

GT Code - 图译算法编辑器（集成QT、C++、C、Linux、Git、java、web、go、高并发、服务器、分布式、网络编程、云计算、大数据项目）

目录项目概述发文意义项目介绍功能分析设计概要功能展示项目文档项目概述 “GT Code 图译算法编辑器”是一款跨平台、轻量级的代码编辑器，主要面向软件开发人员，它实现了编辑、编译、绘制代码流程图、生成调试演示动画等功能，以…...

编程日记 2023/8/17 6:39:54

# 快速评估立功科技基于S32K324的TMS方案

文章目录 1.前言2.立功科技的TMS方案介绍2.1 介绍资料2.2 简要介绍 3.S32K3_TriMotor评估板测试3.1 环境搭建S32 Design Studio for S32 Platform 3.4安装RTD 2.0.0安装Freemaster 3.2 3.2 例程测试3.3 例程适配3.4 双核烧录3.5 测试 1.前言最近和一些做汽车水泵/风机的客户交…...

编程日记 2023/8/17 6:38:53

docker+haror

docker 2013年诞生，推荐单容器只运行一个程序或进程，形成一个分布式的应用模型。总结下来就是：docker带来启动流程更快，运行效率较高、资源损耗较小，属于轻量级的服务。 docker的安装推荐的一键化安装的脚本&#…...

编程日记 2023/8/17 6:37:52

Shell编程——弱数据类型的脚本语言快速入门指南

目录 Linux Shell 数据类型变量类型运算符算术运算符赋值运算符拼接运算符比较运算符关系运算符控制结构顺序结构条件分支结构 if 条件语句 case 分支语句循环结构 for 循环 while 循环 until 循环 break 语句 continue语句函数函数定义 …...

编程日记 2023/8/17 6:36:51

将某些文字变成高量可以点击的超链接核心功能代码 attri.addAttribute(NSAttributedString.Key.link, value:NSURL.init(string: "dctt:p/userPrivacy.html")!, range: NSRange.init(location: s.count - 4, length: 4) )textView.linkTextAttributes [NSAttributed…...

编程日记 2023/8/17 6:35:50

大牛分析相机镜头光学中疑难问题

1、变焦和对焦有什么区别？变焦就是改变镜头的焦距（准确说是像距），以改变拍摄的视角，也就是通常所说的把被摄体拉近或推远。例如18-55mm和70-200mm镜头就是典型的变焦镜头。焦距越长，视角越窄。对焦通常指调整镜片组和底片（传感器平面）之间的距离，从而使被摄物在CC…...

编程日记 2023/8/17 6:34:49

xacro机器人模型文件转urdf文件怎么编写launch文件启动gazebo仿真和在rviz2内显示模型

urdf文件很直白，每个零件的</link> </joint>都要编写一遍，每个零件数据都要自己算出来结果，很麻烦，但是用起来很简单。xacro写的模型文件可以把好多常量提前定义出来，不同大小的机器人只要只要改一下常量…...

编程日记 2023/8/17 6:33:48

前端图片转base64，并使用canvas对图片进行压缩

目录 1.图片转base64的应用场景 2.图片转base64代码 3.对上传的图片进行压缩 1.图片转base64的应用场景图片转base64通常用在用户上传图片的情况下使用，他的作用就是让用户看到预览的图片不受网络的影响。这是传统的文件传输的流程：首先是用户选择…...

编程日记 2023/8/17 6:32:47

电脑键盘打不了字按哪个键恢复？最新分享！

“有没有朋友知道电脑键盘为什么会莫名其妙就打不了字？明明用得好好的，突然就打不了字了，真的让人很迷惑！有什么方法可以解决吗？” 电脑键盘为我们的办公提供了很大的方便，我们可以利用键盘输入我们需要的文…...

编程日记 2023/8/17 6:31:45

ue5读取外部文件

准备环境我的环境是win10，ue5.1.1，cpux86。创建工程时，需要选择C模式这样在Content Browser中会出现C Classes文件夹，下面有一个本项目命名的文件夹，鼠标右键可以看到New C Class选项。新建类的时候选择父类Blue…...

编程日记 2023/8/17 6:30:43

【ARM】Day4 点亮LED灯

1. 思维导图 2. 自己编写代码实现三盏灯点亮 .text .global _start _start: /**********LED1，LED2,LED3点灯:PE10,PF10,PE8**************/ RCC_INIT:使能GPIOE组/GPIOF组控制器,通过RXCC_MP_AHB4ENSETR设置第[5:4]位写1,地址:0x50000A28[5:4]1ldr r0,0x50000A28 …...

编程日记 2023/8/17 6:29:42

TiDB基础介绍、应用场景及架构

1. 什么是newsql NewSQL 是对各种新的可扩展/高性能数据库的简称，这类数据库不仅具有NoSQL对海量数据的存储管理能力，还保持了传统数据库支持ACID和SQL等特性。 NewSQL是指这样一类新式的关系型数据库管理系统，针对OLTP（读-写&…...

编程日记 2023/8/17 6:28:41

深入学习前端开发，掌握HTML、CSS、JavaScript等技术

课程链接： 链接: https://pan.baidu.com/s/1WECwJ4T8UQfs2FyjUMbxig?pwdi654 提取码: i654 复制这段内容后打开百度网盘手机App，操作更方便哦 --来自百度网盘超级会员v4的分享课程介绍： 第1周：HTML5基础语法与标签 &#x1f…...

编程日记 2023/8/17 6:27:39

python编程小游戏五子棋,python编程小游戏简单的

大家好，本文将围绕python编程小游戏如何停止展开说明，python编程小游戏日语教程是一个很多人都想弄明白的事情，想搞清楚python编程小游戏超级玛丽需要先了解以下几个事情。今天分享一个有趣的Python游戏库freegames，它里面包含经…...

编程日记 2023/8/17 6:26:38

spring ico容器 spring注入方式 spring与tomcat整合

一、简介 1、什么是spring？ Spring是一个开源的轻量级Java应用开发框架，它提供了一种简单、高效、灵活的方式来构建企业级应用程序。Spring框架的核心特点是依赖注入（Dependency Injection）和面向切面编程（Aspect-Ori…...

编程日记 2023/8/17 6:25:37

ansible 修改远程主机nginx配置文件

安装ansible brew install ansible 或者 pip3 install ansible 添加远程主机设置秘钥 mac登录远程主机 ssh -p 5700 root192.168.123.211 ssh localhost #设置双机信任 ssh-kyegen -t rsa #设置主机两边的ssh配置文件 vi /etc/ssh/sshd_config/ PermitRootL…...

编程日记 2023/8/17 6:24:35

开源可部署！PyTorch 2.8 RTX 4090D镜像在企业AIGC生产环境落地实践

开源可部署！PyTorch 2.8 RTX 4090D镜像在企业AIGC生产环境落地实践 1. 为什么选择这个深度学习镜像在当今AI技术快速发展的背景下，企业面临的最大挑战之一是如何快速搭建稳定高效的AI开发环境。传统方式需要手动配置CUDA、PyTorch和各种依赖库&#x…...

编程新知 2026/4/1 5:26:59

嵌入式C语言状态机编程实践与优化

1. 状态机编程基础概念在嵌入式系统开发中，状态机(State Machine)是一种极其重要的编程范式。它通过定义系统可能处于的状态集合、状态之间的转换条件以及状态转换时执行的动作，来清晰地描述系统的行为逻辑。状态机之所以在嵌入式领域广泛应用&#xff0…...

编程新知 2026/4/1 4:30:07

安规设计规范-3（如何计算电气间隙和爬电距离）

详尽的计算方式建议参考各个标准的要求，本文只指出常规的基础计算流程。以下示例严格遵循 GB/T 16935.1-2023/IEC 60664-1:2020《低压系统内设备的绝缘配合》，选用储能 PCS（储能变流器）最常见的230V AC 电网侧对低压控制侧场景&am…...

编程新知 2026/4/1 4:25:55

避坑指南：UGUI项目中使用SpriteAtlas的5个致命错误（附解决方案）

UGUI项目中使用SpriteAtlas的5个致命错误与实战解决方案在Unity UI开发中，SpriteAtlas作为性能优化的利器，能够显著减少DrawCall并优化内存使用。然而，许多开发者在实际项目中往往会踩中一些"坑"，导致性能不升反降&…...

编程新知 2026/4/1 3:33:12

告别GIL幻觉：基于subinterpreter+shared_memory的生产级无锁Pipeline（附GitHub星标1.2k的perf-validated模板库）

第一章：Python无锁GIL环境下的并发模型性能调优指南Python 的全局解释器锁（GIL）长期被视为 CPU 密集型并发的瓶颈，但现代 CPython 3.12 已实验性支持无 GIL 构建（通过 --without-pygil 配置选项）&#xff0…...

编程新知 2026/4/1 1:02:26

聊聊我对CompletableFuture的理解

Java提供了许多工具来处理并发编程，而本文将重点介绍Java8中的CompletableFuture。在本文中，笔者通过查阅资料和实践经验，避免了重复已有优秀文章的内容和思路，而是用更简单明了的示例和语言来介绍CompletableFuture，并…...

编程新知 2026/3/31 23:39:07

Qwen3.5-9B效果展示：中英混合输入+代码注释生成高质量输出

Qwen3.5-9B效果展示：中英混合输入代码注释生成高质量输出 1. 模型核心能力概览 Qwen3.5-9B是一款拥有90亿参数的开源大语言模型，在多个领域展现出卓越的能力。这个模型特别适合处理复杂的技术任务，尤其是那些需要同时理解自然语言和编程语言的…...

编程新知 2026/3/31 23:16:49

C++程序崩溃别慌！手把手教你用backward-cpp+glog捕获并记录堆栈信息（附完整CMake配置）

C程序崩溃别慌！手把手教你用backward-cppglog捕获并记录堆栈信息（附完整CMake配置） 深夜两点，服务器告警突然响起。你揉着惺忪的睡眼查看日志，只看到一行冰冷的"Segmentation fault"——没有调用栈&#xf…...

编程新知 2026/3/31 22:42:29

生成式AI系统“内容生成”合规：架构师如何避免“虚假信息”？附4个方法

生成式AI内容生成合规指南：架构师如何系统性规避虚假信息？ 元数据框架标题生成式AI内容生成合规指南：架构师如何系统性规避虚假信息？——从理论到实践的4大核心策略关键词生成式AI合规, 虚假信息防范, 事实一致性, 架构设计, …...

编程新知 2026/3/31 22:20:02

Shell脚本编程与自动化运维了解006

一、Shell脚本基础1.1 Bash脚本概述Shell脚本是一种解释型编程语言，用于自动化Linux系统管理任务。Bash（Bourne Again SHell）是Linux系统中最常用的Shell解释器。脚本基本结构图#!/bin/bash # 这是一个注释 echo "Hello, World!"关…...

编程新知 2026/3/31 22:11:58

目录

前言

一，组件的使用

二，插槽slot

三，refs和parent

四，父子组件间的通信

4.1，父传子 ：父传子的时候，通过属性传递

4.2，父组件监听自定义事件

五，非父子组件的通信

六，混入（mixin）

最后

相关文章：

4.1，父传子：父传子的时候，通过属性传递