Vue入门四（组件介绍与定义｜组件之间的通信）

文章目录

  • 一、组件介绍与定义
    • 介绍
    • 定义
      • 1）全局组件
      • 2）局部组件
  • 二、组件之间的通信
    • 1）父组件向子组件传递数据
    • 2）子传父通信

一、组件介绍与定义

介绍

组件(Component)是Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体。封装性和隔离性非常强。

组件相当于Python中的模块，扩展HTML元素，可以重复使用的代码，使用它就是为了重复使用

例如：一个轮播图需要使用放到很多页面当中使用，一个轮播图有它自己的js、css、html，而组件就可以快捷的做出一个轮播图，有自己的js、css、html放到一起，有自己的逻辑样式这样到哪里都可以使用了，无需在写重复代码

  • 模块化： 是从代码逻辑的角度进行划分的；方便代码分层开发，保证每个功能模块的职能单一；
  • 组件化： 是从UI界面的角度进行划分的；前端的组件化，方便UI组件的重用。

定义

1）全局组件

语法

Vue.component('组件名称', { })，第1个参数是标签名称，第2个参数是一个选项对象。全局组件注册后，任何vue实例都可以用。

组件注意事项：

  1. 构造Vue实例时，传入的各种选项大多数可以在组件里使用(el不能使用)，只有一个例外：data必须是函数，同时这个函数要求返回一个对象，保证数据唯一性，防止对象发生污染。
  2. 组件模版必须是单个根元素(html标签)
  3. 组件模版的内容可以是模版字符串
	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>组件</h1><button @click="handleClick">点击显示</button><hr><!--全局组件--><child v-if="show==true"></child></div>    <script>var vm = new Vue({el:'#div',data:{show:false,},methods:{handleClick(){this.show=!this.show}}})//定义全局组件，一次定义，随时使用//一但声明完成，就可以在所有的组件中直接使用，无需引入和注册Vue.component('Child',{//模版字符串template:`<div><h1>{{name}}</h1><button @click="clickname">点击更改名字</button></div>`,/*render 用于直接生成虚拟dom（生成标签）在工程化中，render中可以直接写jsx,在引入一个babel可以写jsx语法(js的增强版本)render(h) {// h(生成的标签名称,标签中有哪些属性（没有属性就是null）,子元素是什么)let vnode = h('h3', { attrs: { name: 'abc', style: 'color:red' } }, '我是一个标签')return vnode}*/data(){return{name:'tom',}},methods:{clickname(){this.name='jack'}}})</script></body></html>

没有使用工程化时，我们使用浏览器解析标签，所以定义组件不能使用单标签写法，否则组件无法被多次执行，因为但标签写法浏览器在解析的时候觉得有问题，不再执行后续标签。而在工程化中，我们会使用很多包来编译html标签，单标签写法是允许的

2）局部组件

单文件局部组件

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><child></child></div>    <script>// 创建局部组件,它就是一个对象// 局部组件，在创建完成后，如果你要给别人使用，一定要在配置中进行对应的配置var child = {template:`<div><h1>自定的局部组件</h1>{{title}}</div>`,data(){return {title:'hello world',}}}var vm = new Vue({el:'#div',data:{},methods:{},//局部组件要加scomponents:{// key就是在使用时的标签名称// value就是对应的局部组件对象// child: child// 简写child}})</script></body></html>

直接编写在组件内部的局部组件

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><child></child><hr><!--定义在内部的局部组件需要写在上一层组局的template中--><mcq></mcq></div>    <script>var child = {template:`<div><h1>自定的局部组件</h1>{{title}}</div>`,data(){return {title:'hello world',}}}//注意根组件与全局组件无任何关联关系，需放在根组件前面执行，否则会报错//在全局组件内定义局部组件Vue.component('mcq',{template:`<div><h1>我是全局组件</h1><xxx></xxx></div>`,data(){return {}},//在内部定义的局部组件components:{xxx:{template:`<div><h2>我是局部组件</h2></div>`,data(){return {}},}}})var vm = new Vue({el:'#div',data:{},methods:{},//局部组件要加scomponents:{// key就是在使用时的标签名称// value就是对应的局部组件对象// child: child// 简写child}})</script></body></html>

二、组件之间的通信

组件与组件之间的嵌套使用避免不了数据之间的传递。那么Vue中组件的数据是如何传递的呢？组件间数据传递不同于Vue全局的数据传递，组件实例的数据之间是孤立的，不能在子组件的模板内直接引用父组件的数据。如果要把数据从父组件传递到子组件，就需要使用props属性。在Vue中，父子组件的关系可以总结为：prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送消息。所以我们也会经常遇到组件之间需要传递数据的时候，大致分为四种情况：

  • 父组件向子组件传递数据，通过props传递数据
  • 子组件向父组件传递数据，通过events（自定义事件—回调函数）传递数据。
  • 两个同级组件（兄弟组件）之间传递数据，通过EventBus（事件总线–只适用于极小的项目）、Vuex(官方推荐)传递数据
  • 其他方式通信-处理边界情况：
    • 1） $parent：父实例，如果当前实例有的话。通过访问父实例也能进行数据之间的交互，但极少情况下会直接修改父组件中的数据。
    • 2）$root：当前组件树的根 Vue 实例。如果当前实例没有父实例，此实例将会是其自己。
    • 3）$children：当前实例的直接子组件。需要注意 $children 并不保证顺序，也不是响应式的。如果你发现自己正在尝试使用 $children 来进行数据绑定，考虑使用一个数组配合 v-for 来生成子组件，并且使用 Array 作为真正的来源。
    • 4） $ref：一个对象，持有注册过 ref attribute 的所有 DOM 元素和组件实例。访问子组件实例或子元素
    • 5） provide / inject。主要为高阶插件/组件库提供用例。并不推荐直接用于应用程序代码中。并且这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。

1）父组件向子组件传递数据

	1.通过自定义属性---自定义的变量不能用驼峰，不要与子组件中的变量冲突父组件里 <child :name"name" ></child>2. 子组件中引用props,可以指定自定义属性的类型，也可以直接用数组props:{name:String} // props:['name'] /可以接收多个

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>组件通信之父传子：自定义属性</h1>父组件中的名字：{{name}}<hr><global :name="name"></global></div>    <script>Vue.component('global',{template:`<div><h2>我是global组件</h2><h3>父组件传递给子组件的：{{name}}</h3></div>`,data(){return{}},props:['name',]})var vm = new Vue({el:'#div',data:{name:'jack',},methods:{},})</script></body></html>

在这里插入图片描述

2）子传父通信

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script src="../js/vue.js"></script></head><body><div id="div"><h1>组件通信之子传父：自定义事件</h1>父组件接收的名字：{{p_name}}<hr><global @myevent="handleEvent"></global></div>    <script>Vue.component('global',{template:`<div><h2>我是global组件</h2><input type="text" v-model="name"><button @click="handleSend">点击传递给父组件</button></div>`,data(){return{name:'jack',}},methods:{handleSend(){this.$emit('myevent',this.name)}}})var vm = new Vue({el:'#div',data:{p_name:'',},methods:{handleEvent(name){console.log('接收到了子组件传递的名字：'+name)this.p_name=name}},})</script></body></html>

在这里插入图片描述

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

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

相关文章

【数据结构】红黑树

【数据结构】红黑树

导语 之前平衡二叉树讲解中&#xff0c;可以了解到AVL在插入或删除频繁的场景&#xff0c;需要消耗大量的时间来调整&#xff0c;使树重新满足平衡条件。红黑树就此作出优化&#xff0c;在查询速率和平衡调整中寻找平衡&#xff0c;放宽了树的平衡条件&#xff0c;从而可以用于…
阅读更多...
MFC Socket和合信CTMC M266ES 运动控制型PLC通信进行数据交换

MFC Socket和合信CTMC M266ES 运动控制型PLC通信进行数据交换

前言 1、前两篇文章通过对Snap7和S7-1200/S7-1500PLC的通信进行了详细的介绍。Snap7的优点开源性强、使用方便易于上手&#xff0c;跨平台和可移植性性强。但是Snap7也有个缺点就是只能访问PLC的DB、MB、I、Q区进行数据读写&#xff0c;不能对V区进行读写,有人说可以读写V区&am…
阅读更多...
二、MyBatis 基本使用

二、MyBatis 基本使用

本章概要 向SQL语句传参数据输入 Mybatis总体机制概括概念说明单个简单类型参数实体类类型参数零散的简单类型数据Map类型参数 数据输出 输出概述单个简单类型返回实体类对象返回Map类型返回List类型返回主键值实体类属性和数据库字段对应关系 CRUD强化练习mapperXML标签总结 …
阅读更多...
idea git回滚之前提交记录

idea git回滚之前提交记录

提交代码时&#xff0c;如果不小心提交了不需要提交的内容&#xff0c;在本地仓库中&#xff0c;此时需要回滚版本&#xff0c;如何回滚 1.打开git控制台&#xff0c;左下角git,选择要处理的分支&#xff0c;选择刷新获取最新git提交记录 2&#xff09;选中自己commit需要回滚…
阅读更多...
教你用SadTalker一键整合包轻松制作专属数字人

教你用SadTalker一键整合包轻松制作专属数字人

数字人的效果&#xff1a; &#x1f3b5;我用SadTalker制作了专属虚拟数字人&#xff0c;还会唱歌哦&#xff0c;多多点赞关注就出教程呦&#x1f497; SadTalker有独立离线版Ai数字人&#xff0c;也可以在Stable Diffusion以插件的形式使用&#xff0c;但是如果显卡小的话还是…
阅读更多...
开始卷TED：第1篇 —— 《Embrace the near win》—— part: 3

开始卷TED：第1篇 —— 《Embrace the near win》—— part: 3

She first hit a seven, I remember, and then a nine, and then two tens, and then the next arrow didn’t even hit the target. 她第一次射中了7环&#xff0c; 我记得接下来是个9环&#xff0c;然后是2个十环&#xff0c;接下来的那支箭甚至没有射到靶上。 And I saw tha…
阅读更多...
强化学习10——免模型控制Q-learning算法

强化学习10——免模型控制Q-learning算法

Q-learning算法 主要思路 由于 V π ( s ) ∑ a ∈ A π ( a ∣ s ) Q π ( s , a ) V_\pi(s)\sum_{a\in A}\pi(a\mid s)Q_\pi(s,a) Vπ​(s)∑a∈A​π(a∣s)Qπ​(s,a) &#xff0c;当我们直接预测动作价值函数&#xff0c;在决策中选择Q值最大即动作价值最大的动作&…
阅读更多...
【Vue3】2-4 : 声明式渲染及响应式数据实现原理

【Vue3】2-4 : 声明式渲染及响应式数据实现原理

本书目录&#xff1a;点击进入 一、声明式渲染 1.1 什么是JS表达式&#xff1a;能够进行赋值的操作 ▶ 正确 ▶ 错误示例 二、示例&#xff1a;2秒后&#xff0c;页面中 message 由 hello world 变成 hi vue ▶ 效果 三、原理&#xff1a;利用ES6的Proxy对象对底层进…
阅读更多...
Linux网络编程(一-网络相关知识点)

Linux网络编程(一-网络相关知识点)

目录 一、网络相关知识简介 二、网络协议的分层模型 2.1 OSI七层模型 2.2 TCP/IP五层模型 2.3 协议层报文间的封装与拆封 三、IP协议 3.1 MAC地址 3.2 IP地址 3.3 MAC地址与IP地址区别 一、网络相关知识简介 互联网通信的本质是数字通信&#xff0c;任何数字通信都离…
阅读更多...
千问写作——论文写作

千问写作——论文写作

【千问写作】 千问写作是运用通义千问720亿参数的语言模型&#xff08;qwen-72b-chat&#xff09;进行基于目录的论文创作&#xff0c;通过python-docx设置文档格式然后写出文档 &#xff0c;其他免费模型&#xff08;qwen-1.8b-chat&#xff09;暂时无法生成目录 1. 请求延时 …
阅读更多...
Docker实战10｜实现volum数据卷

Docker实战10｜实现volum数据卷

上一篇文章中&#xff0c;仔细讲解了Docker是如何改变当前的root文件系统以及mount等操作。 本文继续讲解Docker是如何实现Volum数据卷的。 实现Volume数据卷 获取代码 git clone https://gitee.com/mjreams/docker.git 上一小节介绍了如何使用AUFS包装busybox&#xff0c…
阅读更多...
Windows11快速安装Android子系统

Windows11快速安装Android子系统

很多小伙伴想在电脑运行一下安卓程序&#xff0c;或则上班用手机摸鱼不方便&#xff0c;用电脑又没有想要的手机软件&#xff0c;那么怎么用电脑来安装安卓软件呢&#xff1f; 首先设置地区 安装Android子系统的前提需要安装 Amazon Appstore 这个应用&#xff0c;内地不能下载…
阅读更多...
【博士每天一篇论文-算法】Optimal modularity and memory capacity of neural reservoirs

【博士每天一篇论文-算法】Optimal modularity and memory capacity of neural reservoirs

阅读时间&#xff1a;2023-11-15 1 介绍 年份&#xff1a;2019 作者&#xff1a;Nathaniel Rodriguez 印第安纳大学信息学、计算和工程学院&#xff0c;美国印第安纳州布卢明顿 期刊&#xff1a; Network Neuroscience 引用量&#xff1a;39 这篇论文主要研究了神经网络的模块…
阅读更多...
SpringBoot+Redis实现接口防刷功能

SpringBoot+Redis实现接口防刷功能

场景描述&#xff1a; 在实际开发中&#xff0c;当前端请求后台时&#xff0c;如果后端处理比较慢&#xff0c;但是用户是不知情的&#xff0c;此时后端仍在处理&#xff0c;但是前端用户以为没点到&#xff0c;那么再次点击又发起请求&#xff0c;就会导致在短时间内有很多请求…
阅读更多...
RK3568平台开发系列讲解（Linux系统篇）Linux 内核打印

RK3568平台开发系列讲解（Linux系统篇）Linux 内核打印

🚀返回总目录 文章目录 一、方法一：dmseg 命令二、方法二：查看 kmsg 文件三、方法三：调整内核打印等级一、方法一：dmseg 命令 在终端使用 dmseg 命令可以获取内核打印信息，该命令的具体使用方法如下所示： 首先在串口终端使用 “dmseg”命令，可以看见相应的内核打印信息…
阅读更多...
Windows.OpenSSL生成ssl证书配置到nginx

Windows.OpenSSL生成ssl证书配置到nginx

一、下载OpenSSL程序安装 到E:\soft\OpenSSL-Win64 二、打开一个CMD控制台窗口&#xff0c;设置好openssl.cnf路径 E: cd E:\soft\OpenSSL-Win64\bin set OPENSSL_CONFE:\soft\OpenSSL-Win64\bin\openssl.cnf 三、在当前目录 E:\soft\OpenSSL-Win64\bin 里创建两个子目录 m…
阅读更多...
酿酒生产废水处理设备如何选型

酿酒生产废水处理设备如何选型

选型酿酒生产废水处理设备是确保废水处理过程高效稳定的关键步骤。酿酒生产过程中&#xff0c;产生的废水中含有大量有机物和悬浮物&#xff0c;因此需要选择适合的设备来进行处理。 首先&#xff0c;要根据酿酒生产废水的特点进行选型。酿酒废水的主要特点是&#xff1a;水量较…
阅读更多...
phpstorm配置ftp

phpstorm配置ftp

1 选择设置ftp 2设置自动上传
阅读更多...
分享两个概念：非受检异常和受检异常

分享两个概念：非受检异常和受检异常

分享两个概念&#xff1a;非受检异常和受检异常 愿你的每一天都充满阳光和笑声&#xff0c;愿每一步都是轻松与愉快。在新的旅程中&#xff0c;愿你找到勇气攀登高峰&#xff0c;找到智慧化解困境。 愿你的心中充满温暖和善意&#xff0c;愿你的梦想如彩虹般美丽且真实。愿你发…
阅读更多...
阿里云ECS服务器安装了数据库，nginx 等，已经启动，但是浏览器，navicat 访问不了

阿里云ECS服务器安装了数据库，nginx 等，已经启动，但是浏览器，navicat 访问不了

目录 1 问题2 实现 1 问题 阿里云ECS服务器安装了数据库&#xff0c;nginx 等&#xff0c;已经启动&#xff0c;但是浏览器&#xff0c;navicat 访问不了&#xff1b; 防火墙也关闭了&#xff0c;使用命令已经进入数据库了&#xff0c;说明数据库已经安装成功了&#xff0c;但…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023