一.什么是组件化开发
组件化开发:根据封装的思想,把页面上可重用的UI结构封装为组件,方便项目的开发和维护
vue是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是.vue。之前接触到的App.vue文件本质上就是一个vue的组件
二.vue组件的构成
分为三部分
template ->组件的模板结构
<template>
<div>
<h1>用于用户自定义结构,只能有一个根节点</h1>
</div>
</template>
script ->组件的JavaScript行为
<script>
//默认导出。这是固定写法!
export default {
//注意:.vue组件中的data不能像之前一样,不能指向对象。
//组件中的 data 必须是一个函数
data() {
return {
username: 'admin'
}
}
}
</script>
style ->组件的样式
<style lang = "scss">
//用来编写样式
</style>
三.使用父子组件
在父组件注册子组件,即私有组件:
- 使用import语法导入需要的组件
- 在父组件中使用components节点注册子组件
- 以标签的形式使用刚才注册的组件
如果子组件要在多个父组件中使用,需要注册全局组件:
- 在main.js文件中,通过vue.component()注册
- 先import导入
- 再注册vue.component(“myCount”,count)
四.组件的props
- props是组件的自定义属性,在封装通用的全局组件时,合理的使用props可以提高组件复用性
- props的值是只读的,想修改props的值,可以把 props的值转存到data中
- props的写法有两种形式,数组和对象格式
export default {
//组件的自定义属性
props:['自定义属性A',‘自定义属性B','其它自定义属性..."].
//组件的私有数据
data() {
return { }
}
}
export default {
props: {
init: {
//用default属性定义属性的默认值
default: 0
//用type属性定义属性的值类型,不符合时,终端报错
type:number
//必填项校验
required:true
}
}
}
五.阻止组件之间的样式冲突
默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是:
单页面应用程序中,所有组件的DOM结构,都是基于唯一的index.html页面进行呈现的每个
组件中的样式,都会影响整个index.html页面中的DOM元素
解决方法: 加一个scoped
<style lang="scss" scoped>
</style>
解决样式穿透问题用/deep/
使用情况:
在父组件中直接修改子组件的样式时,需要用/deep/
在使用第三方组件库的时候,如果有修改第三方组件默认样式的需求,要用/deep/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。