什么是Vue组件?
Vue组件从创建到销毁会经历哪些阶段?
Vue组件之间如何实现数据共享?
vue 是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件
根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。
每个 .vue 组件都由 3 部分构成,分别是:
1. <template> -> 组件的模板结构
每个组件对应的模板结构,需要定义到 <template> 节点中,该节点只起包裹作用,不会被渲染,且该节点内只能包含唯一的根节点
2. <script> -> 组件的 JavaScript 行为 ,
组件相关的data数据、methods方法等都要定义到<script>里的export defult{}中去
3. <style> -> 组件的样式 , 且支持less的语法格式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
其中,data必须为函数形式定义数据对象
export defult{
data(){
return {
username: '',
password: ''
}
}
}
(1)步骤:
1:使用 import 语法导入需要的组件
2:使用 components 节点注册组件
3:以标签形式使用刚才注册的组件
以上的形式注册的组件为私有组件,只能在当前的.vue组件中使用
在vue 项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。示例代码如下:
全局组件注册后,可以在任意.vue组件中使用
props 是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性
注意:props属性是只读的,不能修改,否则会报错
(1)props定义的两种形式
还可以通过自定义属性对象的defult属性来给定默认值。
(2)props的赋值
在使用某一组件时,可以通过以下形式,给该组件中的props赋值(假设Left组件内有自定义属性msg)
<Left :msg="message"></Left>
<script>
data(){
return {
msg: 'hello world!'
}
}
</script>
生命周期(Life Cycle)是指一个组件从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段。
由 vue 框架提供的内置函数,会伴随着组件的生命周期,自动按次序执行。
Vue组件最早可以在created阶段时请求数据
定义组件在created阶段时行为的语法格式如下:
export defult{
created(){//组件的props/data/methods都已经创建好,但还没渲染到页面上的阶段
//发起ajax请求,请求数据
}
}
生命周期各阶段的介绍详见下图:
在项目开发中,组件之间的最常见的关系分为如下两种:
① 父子关系
② 兄弟关系
可以联想一下二叉树的结点之间的关系。
(1)父 -> 子共享数据
父组件在使用子组件标签时,可在标签内给子组件的属性赋值
(2)子 -> 父共享数据
子组件调用一个自定义方法,并将数据对象值作为方法的参数,而父组件则在使用子组件标签时,用@监听该方法,获得子组件的数据对象值
创建EventBus为中间件
步骤:
① 创建 eventBus.js 模块,并向外共享一个 Vue 的实例对象
② 在数据发送方,调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件
③ 在数据接收方,调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件
看到这里,想必你的眼睛已经掌握了Vue组件的使用了吧!
Vue项目基于单页面应用(SPA:single-page application)开发。
通过JS操作DOM, 动态重写当前页面来与用户交互,避免了页面之间切换而打断用户体验,页面上所有必要的代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索,或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面。
因此,在使用Vue框架时,组件的创建和使用、组件之间的数据共享固然会非常重要。
如果大家觉得这篇文章对你们有帮助,希望可以点赞支持哦!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。