vue2脚手架之自定义组件的总结
组件 总结 自定义 Vue2 脚手架
2023-06-13 09:13:11 时间
前言
vue脚手架的作用是用来自动一键生成vue+webpack的项目模版,包括依赖库,免去你手动安装各种插件,寻找各种cdn并一个个引入的麻烦。
vue脚手架指的是vue-cli,它是一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。
vue-cli是有Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本
是一个快速构建 vue 项目的工具,通过他,我们可以将 vue 所需要的插件安装完成。
vue-cli这个构建工具大大降低了webpack的使用难度,支持热更新,有webpack-dev-server的支持,
相当于启动了一个请求服务器,给你搭建了一个测试环境,只关注开发就OK。
当我们给一个组件添加原生的dom事件时,如(给组件上添加一个@click点击事件): App.vue: ... <StudentLqj ref="student" @click.native="show"></StudentLqj> ...
show(){ alert('123') }
这样的话我们点击页面中的<StudentLqj/>这个组件时,就可以出现绑定的 alert事件了。 注意:如果我们只写(@click=“xxx”)是不起作用的,我们必须这样写: @click.native="xxx"
展示结果:但我们绑定完一个点击事件给子组件时,点击组件的范围就会出现相应的结果!
原理:
观察上图我们可以发现所有子组件中的跟标签<div>只有一个,也只能为一个,如果多写会报错!
当我们在app.vue给子组件绑定事件时,其实vue自动的给我们子组件的最外部的跟标签<div/>在添加相应的事件!
自定义组件的总结:
1.一种组件通信的方式,适用于:子组件====>父组件 2.使用场景:A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件(事件的回调在A中)。 3.绑定自定义事件: 1.第一种方式,在父组件中: <Demo @atlqj="test"/>或<Demo v-on:atlqj="test"/> 2.第二种方式,在父组件中: <Demo ref="demo"/> ...... mounted(){ this.$refs.xxx.$on('atlqj',this.test) } 3.若想让自定义事件只触发一次,可以使用once修饰符,或$once方法。 4.触发自定义事件:this.$emit('atlqj',数据) 5.解绑自定义事件this.$off('atlqj') 6.组件上也可以绑定原生DOM事件,需要使用native修饰符。 7.注意:通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!
相关文章
- 微信小程序官方组件展示之表单组件keyboard-accessory源码
- 每日一学vue2:组件复用(详细讲解)、mixin(混入)、mounted(){}钩子函数、plugins(自定义插件)
- 理论:第六章:SpringCould组件有哪些,他们的作用是什么(说七八个)?微服务的CAP是什么?BASE是什么?
- video组件-腾讯视频播放插件3.0新版本的使用方法总结
- 总结了Vue组件通信方式,别再说不会组件通信了
- React组件的通信方式总结(上)
- vue3如何获取绑定在组件上的 textarea DOM元素
- 微服务容错组件Hystrix设计分析
- 【Android 应用开发】Android UI 设计之 TextView EditText 组件属性方法最详细解析
- 【Android 性能优化】布局渲染优化 ( GPU 过度绘制优化总结 | CPU 渲染过程 | Layout Inspector 工具 | View Tree 分析 | 布局组件层级分析 )
- 集成Eureka与其他Spring Cloud组件
- Spring Cloud Security的核心组件-OAuth2示例
- Java实现鼠标拖拽移动界面组件