五分钟带你摸透 Vue组件及组件通讯
一.组件化开发
- 组件 (Component) 是 Vue.js 强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代 码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。
- 在vue中都是组件化开发的,组件化开发就是把一个完整的页面分割成一个一个的小组件
- 组件化开发 容易维护 可以复用
1.1.定义简单的组件
1.1.1语法:
Vue.component()里面有两个参数:
- 组件名称
- 是个对象 对组件的设置 包括html模板 数据侦听器等
Vue.component('first-component',{ template:'<h1>我爱我的祖国</h1>'})
1.1.2组件的使用:
<div id="app"> <first-component></first-component>
</div>
组件不能写到#app的元素外面
1.1.3组件的重复使用
组件就是一个可以重复引用的Vue实例 可以在页面中引用多次
<div id="app">
<first-component></first-component>
<first-component></first-component>
<first-component></first-component>
<first-component></first-component>
<first-component></first-component>
</div>
1.1.4定义的组件只能有一个根元素
案例:
下面定义组件中两个h1都输入根元素
Vue.component('aa',{
template:'<h1>爱我中华</h1><h1>建设我们的国家</h1>'
})
可以改写成如下:
Vue.component('aa',{
template:'
<div><h1>爱我中华</h1><h1>建设我们的国家</h1>
</div>
'
})
1.2.组件中的事件
组件就是可以重复使用的Vue实例 所以组件中也有Vue中的事件
data computed watch methods 以及生命周期钩子函数等 但是组件中没有el
组件中也可以为元素添加事件:
Vue.component('aa', {template: `<div class="bottom"><button @click="turnOn">我是测试按钮</button></div>`,methods: {turnOn(){console.log('我是组件中的事件')}}})
1.3.组件中的数据
组件中的data数据 与new Vue中的不同 为了保证组件中的数据是私有的所以组件中的data数据是一个返回函数 组件中的数据都在函数的作用域中 保证组件中的数据互不感染
data() {return {msg: '爱我中华'}}
二.组件通讯
因为组件对封闭的 但是在实际的开发中 组件之间的数据是相互依赖 需要相互传递的 具体来说组件通讯分为三大类:
- 父组件为子组件传递数据
- 子组件为父组件传递数据
- 非父子组件之间传递数据
2.1 父传子
父组件向子组件传递数据
- 在子组件中定义props属性 值为数组类似于data 但data中的数据来自本身 而props中的数据来自父组件
- 子组件使用模板中使用props中的属性和data中的用法相同
- 父组件通过props传值给子组件
输出结果为:
说明:
- 创建Vue实例 data中的数据msg为一个数组
- 创建组件 在整个项目中 2组件相对就是1的子组件
- 通过3方式前者msg为props值中的数据 后者msg为newVue中data中的数据
- 最后正是props中的属性也有data中的使用方法 将数据进行遍历在页面中
**注意:props负责获取父组件的传递过来的,props中的值是只读的,不允许修改 **
2.2 子传父
原理
- 父组件使用子组件时 在其中定义一个自定义事件 并且绑定父组件中的一个自定义函数 当事件被调用时执行自定义函数
- 子组件通过this$emit执行自定义事件
最终输出结果为3
- 在子组件中定义一个点击事件 触发时执行子组件中的dian函数 并且将参数传入函数中
- 在上面的函数中通过this.$emit(‘事件名称’,参数)调用3中的a自定义事件并且将参数传过去
- 当a事件被触发时 会执行4中的aaa自定义函数 同时获取参数 最终实现子组件向父组件传数据
实例改造
根据父子组件之间的数据传递实现产品列表的组件化开发
代码如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 1000px;margin: 100px auto;text-align: center;}table {width: 900px;margin: 50px auto;border-collapse: collapse;}table,th,td {border: 1px solid rgb(218, 124, 17);}.color {background-color: rgb(26, 172, 152);}</style>
</head><body><div id="app"><atitle @tian="tian" :aatitle="aupda" @cha="cha"></atitle><acontent :content="newcontent" @del="del" @upda="upda"></acontent></div><script src="./node_modules/vue/dist/vue.js"></script><script>Vue.component('atitle', {props: ['aatitle'],data() {return {keyword: ''}},template: `<div>型号 <input type="text" v-model=aatitle.name>价格 <input type="text" v-model=aatitle.may @keyup.enter="tian"><button @click="tian">录入</button><br><input type="text" v-model="keyword"></div>`,methods: {tian() {this.$emit('tian', this.aatitle.name, this.aatitle.may)this.aatitle.name = ''this.aatitle.may = ''}},watch: {keyword: {handler(newvalue) {this.$emit('cha', newvalue)},immediate: true}}})Vue.component('acontent', {props: ['content'],template: `<table><tr><th>编号</th><th>机型</th><th>价格</th><th>时间</th><th>操作</th></tr><tr v-show="this.content.length==0"><td colspan="5">没有任何发布任何产品</td></tr><tr v-for="(item,index) in content"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.may}}</td><td>{{item.time}}</td><td><a href="#"" @click.prevent="del(item.id)">删除</a><a href="#"" @click.prevent='upda(item.id)'>编辑</a></td></tr></table>`,methods: {del(id) {this.$emit('del', id)},upda(id) {this.$emit('upda', id)}}})const app = new Vue({el: '#app',data: {newcontent: [],aupda: {},isup: false,upid: '',content: [{id: 1,name: '华为',may: 5000,time: Date.now()},{id: 2,name: '小米',may: 6000,time: Date.now()},{id: 3,name: '苹果',may: 4500,time: Date.now()},{id: 4,name: '1+',may: 3000,time: Date.now()},{id: 5,name: 'oppo',may: 2000,time: Date.now()},{id: 6,name: '1+2',may: 8000,time: Date.now()},{id: 7,name: '1+3',may: 12000,time: Date.now()}]},methods: {del(id) {let index = this.content.findIndex(item => {return item.id == id})this.content.splice(index, 1)this.newcontent.splice(index, 1)},tian(name, may) {if (this.isup) {let a = this.content.find(item => {return item.id == this.upid})a.name = namea.may = may} else {let id = this.content.length - 1 < 0 ? 1 : this.content[this.content.length - 1].id + 1let content = {id: id,name: name,may: may,time: Date.now()}this.content.push(content)this.newcontent.push(content)}},cha(value) {this.newcontent = this.content.filter(item => {return item.name.includes(value)})},upda(id) {let a = this.content.find(item => {return item.id == id})this.aupda = {name: a.name,may: a.may}this.isup = truethis.upid = id}}})</script>
</body></html>
2.3 非父子之间的组件通讯
原理:
通过一个空的Vue实例来传递数据
const bus =new Vue()
核心逻辑:
组件A给组件B传值:
- 组件A给bus注册一个事件,监听事件的处理程序
- 组件B触发bus上对应的事件,把 值当成参数来传递
- 组件A通过事件处理程序获取数据
最终点击h2控制台会输出2
- 创建1和2两个非父子组件以及3空vue实例bus
- 在1组件中 钩子函数created中通过bus.$on为bus自定义一个事件aa
- 在2组件中 当点击h2元素时触发dian函数 并且将值出过去
- 在2组件的dian函数中通过bus.$emit方触发1中的aa事件 并传参过去
- 当1中的aa事件被触发时会执行其中的函数并获取参数
实例:
通过非父子组件 实现开关灯案例
- 关闭状态:
开启状态:
代码如下
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#app {width: 500px;height: 500px;margin: 100px auto;}.box {height: 200px;width: 200px;margin: 0 auto;background-color: black;border-radius: 50%;}.below {height: 200px;width: 400px;margin: 50px auto;}button {margin-left: 66px;width: 100px;height: 40px;}.on {background-color: rgb(160, 184, 25);}</style>
</head><body><div id="app"><zss></zss><sgy></sgy></div><script src="./node_modules/vue/dist/vue.js"></script><script>const bus = new Vue()Vue.component('zss', {data() {return {attribute: "on",state: false}},created() {bus.$on('lamp', result => {this.state = result})},template: `<div class="box" :class="state?attribute:''"></div>`})Vue.component('sgy', {template: `<div class="below"><button @click="on">开灯</button><button @click="off">关闭</button></div>`,methods: {on() {bus.$emit('lamp', true)},off() {bus.$emit('lamp', false)}}})const app = new Vue({el: '#app',data: {}})</script>
</body></html>
五分钟带你摸透 Vue组件及组件通讯相关推荐
- c++ map用法_Python专题——五分钟带你了解map、reduce和filter
点击上方蓝字,和我一起学技术.今天是Python专题第6篇文章,给大家介绍的是Python当中三个非常神奇的方法:map.reduce和filter.不知道大家看到map和reduce的时候有没有什么 ...
- 五分钟学会python函数_五分钟带你搞懂python 迭代器与生成器
前言 大家周末好,今天给大家带来的是Python当中生成器和迭代器的使用. 我当初第一次学到迭代器和生成器的时候,并没有太在意,只是觉得这是一种新的获取数据的方法.对于获取数据的方法而言,我们会一种就 ...
- 干货:五分钟带你看懂NestedScrolling嵌套滑动机制
Android NestedScrolling嵌套滑动机制 Android在发布5.0之后加入了嵌套滑动机制NestedScrolling,为嵌套滑动提供了更方便的处理方案.在此对嵌套滑动机制进行详细 ...
- 五分钟带你了解前端开发,以及前端开发的发展机会
前端开发 前端开发是创建Web页面或app等前端界面呈现给用户的过程,通过HTML,CSS及JavaScript以及衍生出来的各种技术.框架.解决方案,来实现互联网产品的用户界面交互 .它从网页制作 ...
- 十分钟带你了解Vue框架
Vue 框架诞生于2014年,其作者为中国人--尤雨溪. Vue用于构建交互式的Web界面的库,是一个构建数据驱动的Web界面渐进式框架,该框架遵循CMD规范,并且提供的设计模式为MVVM模式. (M ...
- 五分钟带你玩转Zabbix6.0容器化HA集群
图片 蔡斯 | Zabbix开源社区签约专家 Zabbix资深玩家,SRE高级运维,架构师.精通服务组件监控.模板制作及告警治理. 擅长领域:Zabbix API定制化开发,对接企业蓝鲸,JMS保垒机 ...
- 五分钟带你了解Django框架设计思想!
Python编程语言的持续火爆,在最新Tiobe编程语言排行榜中位列第五,热度持续增加,尤其是在 AI 和 大数据时代,Python是 AI 和大数据时代的第一开发语言.这已经是一个不争的事实了,唯一 ...
- 二道波哥-五分钟带你了解好省
什么是好省? 1.好省是一款导购APP,依托于淘宝天猫平台,为广大用户提供海量优惠券,致力于帮助用户买到最具性价比的网购商品.与此同时,好省还是一个创业平台,在这里,任何人都可以0门槛.0投资创业,只 ...
- CAD填充技巧:1分钟带你摸透CAD图案填充!
在使用浩辰CAD软件绘制CAD图纸的过程中,图案填充功能是CAD设计师们的常用功能之一,用于绘制各种CAD图纸.在浩辰CAD软件中,CAD图案填充功能的参数设置其实非常丰富.接下来给大家介绍一些比较实 ...
最新文章
- Masm for Windows集成开发环境编写汇编程序
- openStreetMap学习网站
- SVM针对中文文本分类
- C++总结笔记(八)—— 菱形继承
- 常用的基本Windows数据类型
- Spring为啥默认把bean设计成单例的
- Rman 非catalog恢复
- css border画图
- 修改本地AD帐号名称后无法同步到Office 365
- jpegNPP编译为so
- 安平仓管王 5000xp v2.9 免费下载
- 磁珠 符号_超实用理解磁珠
- oracle双活svc,SVC存储虚拟化双活方案
- 数据安全态势感知解决方案汇总
- 唐巧:技术人如何成为管理者
- 华南理工机械考研经验贴——踏踏实实复习是硬道理,第一没有捷径
- 互联网大咖看了都忍不住点赞的电脑配置指南【电脑小白必备】【十年私藏公开分享】
- 使用Junit测试 RESTful
- 域控制器无法向DNS注册SRV记录解决办法
- 易宝支付声明称遭遇大规模黑客攻击
热门文章
- 抚摸斯蒂芬·金 (图)
- 出国?上研?工作?回家种田?(三) IT类专业的工作方向与特点(软硬件技术等岗位)
- HIS中的医学影像信息处理系统(PACS、RIS、LIS)
- onclick 获取img 里面的id_红魔5S游戏手机如何解锁bl获取第三方面具root权限
- mysql rename table_Mysql: RENAME TABLE IF EXISTS
- UFLDL教程:Exercise:Softmax Regression
- @Component 和 @Bean 的区别
- 【网络安全】关于ARP攻击的原理以及在Kali Linux环境下的实现
- Python 链接汇总
- Oracle 建立包 和 包体