vue(五)组件、自定义属性props
一、组件化开发组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。vue 是一个支持组件化开发的前端框架。 vue 中规定:组件的后缀名是 .vue。 App.vue 文件本质上就是一个 vue 的组件。二、vue 组件的三个组成部分每个 .vue 组件都由 3 部分构成,分别是:template -----组件的模板结构...
一、组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目
的开发和维护。
vue 是一个支持组件化开发的前端框架。 vue 中规定:组件的后缀名是 .vue。 App.vue 文件
本质上就是一个 vue 的组件。
二、vue 组件的三个组成部分
每个 .vue 组件都由 3 部分构成,分别是:
template ----- 组件的模板结构
script ----- 组件的 JavaScript 行为
style ----- 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
2.1 template
vue 规定:每个组件对应的模板结构,需要定义到 <template> 节点中。
<template>
<div>
</div>
</div>
</template>
template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素。template 中只能包含唯一的根节点、
2.2 script
vue 规定:开发者可以在 <script> 节点中封装组件的 JavaScript 业务逻辑。
<script>
//组件相关的 data 数据 methods 方法 都要定义到export default 所导出的对象中
export default {};
</script>
2.3 style
vue 规定:组件内的 <style> 节点是可选的,开发者可以在 <style> 节点中编写样式美化当前
组件的 UI 结构。
在 <style> 标签上添加 lang="less" 属性,即可使用 less 语法编写组件的样式:
<style lang="less">
.box {
}
</style>
三、使用组件的三个步骤
以下操作都在App.vue中
步骤1:使用 import 语法导入需要的组件
import Left from "@/components/Left.vue";
export default {
components: {
Left,
},
};
<template>
<div>
<Left></Left>
</div>
</div>
</template>
3.2 通过 components 注册的是私有子组件
3.3 注册全局组件
vue 项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。
import Left from "@/components/Left.vue";
Vue.component('MyLeft',Left)
四、组件的 props
props 是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性!
export default {
//组件的自定义属性
props:['自定义属性A','自定义属性B','自定义属性C'],
//组建的私有属性
data(){
return {}
}
}
4.1 props 是只读的
vue 规定:组件中封装的自定义属性是只读的,程序员不能直接修改 props 的值。否则会直
接报错
要想修改 props 的值,可以把 props 的值转存到 data 中,因为 data 中的数据都是可读可写的!
4..2 props 的 default 默认值
在声明自定义属性时,可以通过 default 来定义属性的默认值。示例代码如下:
export default {
props:{
info:{
default:0
}
}
};
4.3 props 的 type 值类型
在声明自定义属性时,可以通过 type 来定义属性的值类型。示例代码如下:
export default {
props:{
info:{
default:0,
//如果传递过来的值不符合此类型,则会在终端报错
type:Number
}
}
};
4.4 props 的 required 必填项
在声明自定义属性时,可以通过 required 选项,将属性设置为必填项,强制用户必须传递属性的值。示例代码如下:
export default {
props: {
info: {
//值类型为数字
type: Number,
//必填校验项
required: true,
},
},
};
更多推荐
所有评论(0)