组件知识点
什么是组件化开发: 据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。.vue文件就是Vue组件
vue 组件的三个组成部分:
- template -> 组件的模板结构(必写)
- script -> 组件的 JavaScript 行为(可选)
- style -> 组件的样式(可选)
三个组成部分
1.template
注意:
1.template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
2.template 中只能包含唯一的根节点
使用方法:
页面展示:
2.script
在默认导出的对象中,声明组件的data,methods,computed,filters
为什么data必须是一个函数?
一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝:如果使用数据对象的方式,会导致多个组件实例共用同一份数据的问题
3.style
1.在 <style> 节点中编写样式美化当前组件的 UI 结构
2.<style> 标签上添加 lang=“less” 属性,即可使用 less 语法编写组件的样式
组件之间的父子关系
1.组件在被封装好之后,彼此之间是相互独立的,不存在父子关系
2.在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系
注册组件
全局组件
- 在main.js中注册全局组件
- 导入需要全局注册的组件
- 使用Vue.component(‘注册名’,‘要注册的组件’)
使用方法:
页面显示:
私有组件
- 导入
- 注册(注册名称的首字母建议大写,目的:方便和 html 元素做区分)
- 使用(以标签形式使用)
页面显示:
组件的props
props 是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性。
(简单来说:封装.vue组件的时候,只封装组件的UI结构和style样式,组件中的数据,尽量让使用者动态提供)
注意:
1.props是只读的
2.props中default定义属性的默认值
3.props的type来定义属性的值类型
4.require是将属性设置为必填项,强制用户必须传递属性的值
使用方法:
将props.vue中的内容渲染到Left.vue中
props.vue中的内容
<template>
<div>
<h1>{{ title }}</h1>
</div>
</template>
<script>
export default {
//用porps 将页面结构与样式传给left.vue中,但是值在left.vue中给出
props: ['title']
}
</script>
<style></style>
left.vue中的内容
<template>
<div class="left-container">
<h3>Left</h3>
//私有组件的使用
//用title动态传参
<Article title="props.vue的内容"></Article>
</div>
</template>
<script>
//私有组件的导入
import Article from '@/components/props.vue'
export default {
//私有组件的引用
components: {
Article
}
}
</script>
<style></style>
页面显示效果:
我们还可以通过绑定属性的方法来传值
例如上面的例子,我们就可以在left,vue中,通过data()给定title的值
<template>
<div class="left-container">
<h3>Left</h3>
//绑定属性要加 :
<Article :title="leftTitle"></Article>
</div>
</template>
<script>
import Article from '@/components/props.vue'
export default {
data() {
return { leftTitle: '通过绑定属性得到的title值' }
},
components: {
Article
}
}
</script>
<style></style>
页面效果:
关于‘’props是只读的‘’,解决:
页面显示效果:
虽然值也改变 但是我们的终端会提示我们props是只读的
关于这种情况的解决方法:
可以把props的值转存到data里面
props.vue中的内容
对象格式的props
假设规定一个属性值传过来的必须是数字的,我们就可以使用对象格式:
第一种写法:
第二种写法:如果除了指定数据类型之外,还要指定其他,就要使用这种方式
props解决样式冲突
在style标签中加入scoped
在父组件中写样式去美化子组件的元素,此时是不生效的,要在样式之前加上/deep/