Vue - 标准开发方式、组件(全局、局部、props、事件传递)、插槽的使用

目录

一、Vue

1.1、标准开发方式

1.2、组件的使用

1.2.1、全局组件

1.2.2、局部组件

1.2.3、props 传递静态数据

1.2.4、props 传递动态数据

1.2.5、事件传递

1.2.6、插槽slot


一、Vue


1.1、标准开发方式

Vue 的标准开发方式是 SPA(Single Page Application):单页面web 应用,也就是收,日后的项目中只有一张页面(index.html).

为什么要使用 SPA 开发方式?

  1. Vue 官方推荐:一个应用中只能存在一个 Vue 实例.
  2. 复用:Vue 提供了 Component 组件,不仅减少了 Vue 实例的代码量,还可以实现复用.
  3. 解耦合:一个组负责完成项目中的一个功能或者一组功能,实现业务隔离.

1.2、组件的使用

1.2.1、全局组件

全局组件:直接注册到 Vue 根实例组件中.

定义方式:Vue.component(' ', {})  ,第一个参数是组件名,第二个参数是配置对象.

Ps:无论是使用全局组件还是局部组件,都必须在组件 template 中添加唯一根元素.

如下代码:

    <div id="app"><!-- 使用组件 --><register></register></div><script src="../js/vue.js"></script><script>//定义全局组件(生效的前提是要有 Vue 实例, 并在实例的作用域中使用)Vue.component('register', {template: `<div><h1>注册</h1><span>{{msg}}</span><span>{{counterSqrt}}</span><comp></comp></div>`,data() { //组件中定义数据,必须函数的形式(和 Vue 实例定义唯一的区别)return { //返回值是一个对象,对象内部就是数据msg: "我是注册全局组件中的数据",count: 2}},methods: { //给组件定义一些方法test() {console.log("我是组件中的方法");}},computed: { //给组件定义一些计算属性counterSqrt() {return this.count * this.count;}},components: { //给组件中定义一些组件comp: {template: `<div>我是全局组件的子组件</div>`}},beforeCreate() { //组件也有自己的生命周期console.log("beforeCreate:", this.msg);//此时 msg 因该是 undefine}//......});const app = new Vue({ //没有这里,组件就不会生效el: "#app"});

效果如下:

 

1.2.2、局部组件

局部组件:只能在注册组件中使用组件.

代码如下:

<div id="app"><login></login><reg></reg></div><script src="../js/vue.js"></script><script>//定义局部组件(这是另一种方式,现在外部定义好,再到局部注册组件中引入)//Ps:在子组件中不可使用父组件的数据! 比如 parent 数据const login = {template: `<div><h1>登录</h1><div>{{ child }}{{ counterSqrt }}</div><comp></comp></div>`,data() {return {child: "我是注册组件的子组件 login 中的数据",count: 3}},methods: { //给组件定义一些方法test() {console.log("我是组件中的方法");}},computed: { //给组件定义一些计算属性counterSqrt() {return this.count * this.count;}},components: { //给组件中定义一些组件comp: {template: `<div>我是子组件的子组件</div>`}},beforeCreate() { //组件也有自己的生命周期console.log("beforeCreate:", this.child);//此时 child 因该是 undefine}//......}let app = new Vue({el: "#app",data: {parent: "我是父组件中的数据"},components: { //注册组件login, //也可以单独在外面定义好组件,然后引入reg: {template: `<div><div>{{ child }}</div></div>`,data() { //注意组件中数据的写法return {child: "我是子组件 reg 中的数据"}}}}});</script>

效果如下:

1.2.3、props 传递静态数据

父组件向子组件传递静态数据:在使用的组件标签上,声明静态数据 key=value (key 是自定义的),最后在子组件的 props 中声明对应的  key 即可

代码如下:

    <div id="app"><!-- 父组件向子组件传递静态数据:在使用的组件标签上,声明静态数据 key=value (key 是自定义的),最后在子组件的 props 中声明对应的  key 即可 --><login name="hello?" count="1"></login></div><script src="../js/vue.js"></script><script>const login = {template: `<div><h1>登录</h1><div>{{ name }} --- {{ count }}</div></div>`,data() {return {//这里相当于添加了 name: "hello?", count="1"}},props: ['name', 'count'] //用来接收父组件传来的数据, 这就相当于在子组件的 data 中添加了这个静态数据}const app = new Vue({el: "#app",components: {login //注册组件}});</script>

效果如下:

1.2.4、props 传递动态数据

向子组件传递动态数据:

  1. 在组件标签上声明 key=value (key 是自定义的,value 就是 Vue 实例中的 data),子组件内部使用 props 数组声明 key 
  2. 声明的自定义 key 可以通过 v-bind 进行属性的动态绑定

Ps:Vue 官方明确提出只允许单向数据流,也就是只能从父传递到子,否则会报警告

代码如下:

    <div id="app"><!-- 向子组件中传递动态数据:1.在组件标签上声明 key=value (key 是自定义的,value 就是 Vue 实例中的 data),子组件内部使用 props 数组声明 key 2.声明的自定义 key 可以通过 v-bind 进行属性的动态绑定最后的效果:1.修改 input 中的值 2.由于 v-model 动态绑定到 Vue实例中的 data 的 count 数据也随之变化3.由于 login 组件中声明的属性 aa 动态绑定了 count,导致 属性aa 也随之变化注意:Vue 官方明确提出只允许单向数据流,也就是只能从父传递到子,否则会报警告--><login :aa="count"></login><input type="text" v-model="count"></div><script src="../js/vue.js"></script><script>const login = {template: `<h1><div>登录</div><h2>{{ aa }}</h2><button @click="add()">点我增加数字<button></h1>`,data() {return {}},props: ['aa'],methods: {add() {this.aa++;//props 声明的数据,就相当于直接 data 中添加了该数据}}}const app = new Vue({el: "#app",data: {count: "1"},components: {login}});</script>

最后的效果:

  1. 修改 input 中的值 
  2. 由于 v-model 动态绑定到 Vue实例中的 data 的 count 数据也随之变化
  3. 由于 login 组件中声明的属性 aa 动态绑定了 count,导致 属性aa 也随之变化

如下图

1.2.5、事件传递

父向子传递事件:在组件标签上定义 @key=value (@自定义事件名=父组件中的事件名) 即可

代码如下:

    <div id="app"><!-- 父向子传递事件:在组件标签上定义 @key=value (@自定义事件名=父组件中的事件名) 即可 --><login @aa="testParent()" @bb="testParent2" @cc="testParent3"></login></div><script src="../js/vue.js"></script><script>const login = {template: `<div><h2>登录</h2><button @click="testChild()">点给我调用父组件中的事件</button></div>`,data() {return {count: 10}},methods: {testChild() {alert("我是子组件中的事件!");//通过 this.$emit 来调用父组件中的事件 //参数1:组件标签上定义的事件名//后续参数: 参数1 后面还可以继续传递参数,作为父组件事件中的参数this.$emit("aa");this.$emit("bb", this.count); //Vue 官方说只能单向传递(父传子),但是这种方式可以实现this.$emit("cc", { count: this.count, name: "cyk", isGood: true });}}}const app = new Vue({el: "#app",methods: {testParent() {alert("1.我是父组件中的事件!");},testParent2(count) {alert("2.我是父组件中的事件!");console.log("获取到子组件的值:" + count);},testParent3(obj) {alert("3.我是父组件中的事件!");console.log("获取到子组件的值: count=" + obj.count + ", name=" + obj.name + ", isGood=" + obj.isGood);}},components: {login}});</script>

效果如下:

1.2.6、插槽slot

插槽就是用来扩展现有组件的.

代码如下:

    <div id="app"><!-- 插槽: 用来扩展现有组件 --><login></login><!-- 默认: 会将信息填入所有插槽 --><hr><login><span>hello</span></login><!-- 具名插槽: 给 slot 标签添加 name 属性作为身份标识  --><hr><login><button slot="aa" @click="parent()">点我</button></login></div><script src="../js/vue.js"></script><script>const login = {template: `<div><slot name="aa"></slot><h1>登录</h1><slot name="bb"></slot></div>`,}const app = new Vue({el: "#app",methods: {parent() {alert("我是父组件的事件");}},components: {login}});</script>

效果如下:

 

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年【天津市安全员C证】模拟考试及天津市安全员C证实操考试视频

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 天津市安全员C证模拟考试是安全生产模拟考试一点通生成的&#xff0c;天津市安全员C证证模拟考试题库是根据天津市安全员C证最新版教材汇编出天津市安全员C证仿真模拟考试。2023年【天津市安全员C证】模拟考试及天津市…

10-SRCNN-使用CNN实现超分辨成像

文章目录 utils_dataset.pymodel.pytrain.pyuse.py主要文件 utils_dataset.py 工具文件,主要用来制作dataset,便于加入dataloader,用于实现数据集的加载和并行读取 model.py 主要写入网络(模型) train.py 主要用于训练 use.py 加载训练好的模型,用于测试或使用 utils_dat…

ACU-01B 3HNA024871-001/03 机器人将如何改变世界

ACU-01B 3HNA024871-001/03 机器人将如何改变世界 由于改进的传感器技术以及机器学习和人工智能方面更显著的进步&#xff0c;机器人将继续从单纯的机械机器转变为具有认知功能的合作者。这些进步&#xff0c;以及其他相关领域&#xff0c;正在享受一个上升的轨迹&#xff0c;…

Archive Team: The Twitter Stream Grab

该集合不再更新&#xff0c;应被视为静态数据集。 从一般 Twitter 流中抓取的 JSON 的简单集合&#xff0c;用于研究、历史、测试和记忆的目的。这是“Spritzer”版本&#xff0c;最轻、最浅的 Twitter 抓取。不幸的是&#xff0c;我们目前无法访问流的洒水器或花园软管版本。 …

MATLAB-自动批量读取文件,并按文件名称或时间顺序进行数据处理

我在处理文件数据时&#xff0c;发现一个一个文件处理效率太低&#xff0c;因此学习了下MATLAB中自动读取特定路径下文件信息的程序&#xff0c;并根据读取信息使用循环进行数据处理&#xff0c;提高效率&#xff0c;在此分享给大家这段代码并给予一些说明&#xff0c;希望能为…

Docker逃逸---授权 SYS_ADMIN Capability逃逸原理浅析

目录 一、产生原因 二、利用条件 三、复现过程 1、容器内挂载宿主机cgroup 2、设置notify_no_release并寻找容器在宿主机上的存储路径 3、将恶意脚本写入release_agent 一、产生原因 给容器额外授权了SYS_ADMIN Cap&#xff0c;并且容器以root权限运行&#xff0c;攻击者…

数据结构之堆

目录 前言 堆的概念与结构 堆的实现 堆的初始化 堆的销毁 堆的显示 堆的插入 堆的向上调整算法 堆的删除 堆的向下调整算法 堆的判空 获取堆顶元素 堆的数据个数 堆的创建 前言 二叉树的顺序结构存储即使用数组存储&#xff0c;而数组存储适用于完全二叉树&#xf…

C# OpenVINO Cls 图像分类

效果 耗时 class idbrown_bear, score0.86 preprocess time: 0.00ms infer time: 2.72ms postprocess time: 0.02ms Total time: 2.74ms项目 代码 using OpenCvSharp; using Sdcb.OpenVINO; using Sdcb.OpenVINO.Natives; using System; using System.Diagnostics; using Sys…

【分享】教你加速访问GitHub,进来学!

哈喽&#xff0c;大家好&#xff0c;木易巷来啦&#xff01; 众所周知&#xff0c;Github是一款程序猿必备的代码托管平台&#xff0c;上面已经存在了无数前辈的心血&#xff01;经常需要在上面查看大佬写的一些好用的开源项目&#xff0c;无赖国外网站的速度实在让人难以接受。…

基于ssm+vue的线上点餐系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

间歇性微服务问题...

在Kubernetes环境中&#xff0c;最近由于特定配置导致Pod调度失败。哪种 Kubernetes 资源类型&#xff08;通常与节点约束相关&#xff09;可能导致此故障&#xff0c;尤其是在未正确定义的情况下&#xff1f; 节点选择器资源配额优先级污点Pod 中断预算 已有 201 人回答了该…

华为数通方向HCIP-DataCom H12-831题库(单选题:261-280)

第261题 某网络通过部署1S-IS实现全网与通,若在一台IS-IS路由器的某接口下配置命令isis timer holding multiplier 5 level-2,则以下关于该场景的描述,正确的是哪一项? A、该接口Level-2邻居保持时间为5秒 B、该接口Level-1邻居保持时间为30秒 C、该接口为点对点链路接口 …

工控网络协议模糊测试:用peach对modbus协议进行模糊测试

0x00 背景 本人第一次在FB发帖&#xff0c;进入工控安全行业时间不算很长&#xff0c;可能对模糊测试见解出现偏差&#xff0c;请见谅。 在接触工控安全这一段时间内&#xff0c;对于挖掘工控设备的漏洞&#xff0c;必须对工控各种协议有一定的了解&#xff0c;然后对工控协议…

Qt开发之路--模块化设计.pri文件

Qt开发之路--模块化设计.pri文件 QT pro文件和pri文件的区别Chapter1 Qt开发之路--模块化设计.pri文件一&#xff1a;.pri文件简介二&#xff1a;通过.pri模块化设计三&#xff1a;结尾 Chapter2 Qt开发大型项目时&#xff0c;通过.pri文件将众多文件按功能模块分类显示Qt中多p…

概率神经网络分类问题程序

欢迎关注“电击小子程高兴的MATLAB小屋” %% 概率神经网络 %% 解决分类问题 clear all; close all; P[1:8]; Tc[2 3 1 2 3 2 1 1]; Tind2vec(Tc) %数据类型的转换 netnewpnn(P,T); Ysim(net,P); Ycvec2ind(Y) %转换回来

7天狂揽 1.3w star 的 MetaGPT,他们的目标让软件公司为之一惊

在 AI 产品爆炸的今天&#xff0c;拥有各种本领的 AI 产品层出不穷&#xff0c;但 MetaGPT 的出现仍然显的格外耀眼&#xff0c;其可以实现只输入单一 prompt&#xff0c;就可以输出需求分析、需求文档、技术架构、最终代码等等产物&#xff0c;这相当于一个开发团队的输出成果…

Linux:【Kafka四】集群介绍与单机搭建

目录 环境简介 一、搭建kafka集群 1.1、复制出两个kafka的配置文件 1.2、修改配置文件中的如下属性 二、启动kafka集群 三、可校验kafka三个节点是否均启动成功 四、查看集群中主题的分区和副本 4.1、新建一个包含了分区和副本的主题 4.2、查看该主题的详细信息 五、…

Android查看签名信息系列 · 使用逆向分析工具JadxGUI获取签名

前言 Android查看签名信息系列之使用逆向分析工具JadxGUI获取签名&#xff0c;通过这种方式&#xff0c;可以获取到的签名信息包括&#xff1a;MD5、SHA1、SHA-256、公钥(模数)等信息 实现方法 1、进入JadxGUI目录下的lib文件夹内&#xff0c;找到jadx-gui-1.4.7.jar文件 2、…

计算机网络第2章-HTTP和Web协议(2)

Web和HTTP 一个新型应用即万维网&#xff08;World Wide Web&#xff09;Web。 HTTP概况 Web的应用层协议是超文本传输协议&#xff08;HTTP&#xff09;&#xff0c;它是Web的核心。 HTTP由两个程序实现&#xff1a;一个用户程序和一个服务器程序。 Web页面&#xff08;W…

VSCode 调试 u-boot

文章目录 VSCode 调试 u-boot调试配置启动 u-boot 脚本调试界面重定向之后继续调试参考 VSCode 调试 u-boot 调试配置 参考 qemu基础篇——VSCode 配置 GDB 调试 要想调试 u-boot 只需要再添加一个 u-boot 的配置即可 {"version": "0.2.0","conf…