Vue组件知识点总结
- 一.vue中的组件化开发
- 二.组件的三个组成部分
- 三.组件的使用步骤
- 步骤1
- 步骤2
- 四.注册全局组件
- 五. 组件的props
- 六.props的default默认值，
- 七.prop的type值类型
- 八.props的require必填项
- 九.组件组件的样式冲突问题
- 1.scoped的使用和底层实现原理
- 2.使用/deep/修改修改子组件中的样式
组件化开发指的是根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。
一.vue中的组件化开发
vue是一个支持组件化开发的前端框架。 vue中规定：组件的后缀名为.vue 。之前接触到的App.vue文件本质上就是一个vue的组件。
二.组件的三个组成部分
每个.vue组件都由3个部分构成，分别是：
- template ： 组件的模板结构
- script ： 组件的JavaScript行为
- style ： 组件的样式
注意：在template里面只能有一个根元素，不然会报错。如果组件里面要定义多个元素，要放在一个根div中 比如：
案例：
代码语言：javascript复制<template>
<div>
<h3>这是{{username}}自定义的Test.vue</h3>
</div>
</template>
<script>
// export default是默认的写法
export default {
//组件里面的data必须是一个函数，不能直接写成data:{}
data() {
//在return里面写的是一个数据对象，返回定义的数据
return {
username: '害恶细菌'
}
}
}
</script>
<style>
div {
background-color: #f00;
}
</style>
定义methods方法
代码语言：javascript复制<script>
// export default是默认的写法
export default {
//组件里面的data必须是一个函数，不能直接写成data:{}
data() {
//在return里面写的是一个数据对象，返回定义的数据
return {
username: '害恶细菌'
}
},
methods:{
changeName(){
//在组件中，this指向的是组件的实例。
this.username = 'haiexijun'
}
}
}
</script>定义侦听器watch、当前组件中的计算属性computed、过滤器filter
代码语言：javascript复制<script>
// export default是默认的写法
export default {
//组件里面的data必须是一个函数，不能直接写成data:{}
data() {
//在return里面写的是一个数据对象，返回定义的数据
return {
username: '害恶细菌'
}
},
methods:{
changeName(){
//在组件中，this指向的是组件的实例。
this.username = 'haiexijun'
}
},
//当前组件的侦听器，当data的值发生改变时触发
watch:{
username(newVal,oldVal){
console.log(newVal,oldVal)
}
},
//当前组件中的计算属性，只要改变了组件中的数据
computed:{
},
//当前组件中的filters
filters:{
}
}
</script>发现，只有data要为一个函数形式，其他则定义为对象形式。
如果style要用less，添加一个lang=“less”
代码语言：javascript复制<style lang="less">
</style>三.组件的使用步骤
组件封装好之后，彼此之间是相互独立存在的，不存在父子关系。
在使用组件的时候，根据彼此的嵌套关系，形成父子关系，兄弟关系。
以一个案例来推动学习： 在项目的src目录下面的components目录下，创建两个vue组件，分别是right.vue和left.vue。
下面来介绍使用步骤
步骤1
上面提到了，如果要使用组件，就必须要在一个父组件里面使用它。也就是说，我们components目录里自己定义的所有组件，要在外面的App.vue这个父组件里被使用。 但要想在App.vue这个组件里面使用其他组件，第一步就是在App.vue这个组件里的<script>里面使用import导入要使用的组件。 然后使用components节点注册组件.
代码语言：javascript复制<script>
import left from './components/left.vue'
export default {
name: 'App',
//在components里面注册组件
components: {
left
}
}
</script>步骤2
在template里的根标签内使用刚才注册的组件。要以标签的形式使用刚才注册的组件
代码语言：javascript复制<template>
<div id="app">
<left></left>
</div>
</template>.
四.注册全局组件
通过components注册的组件是私有组件。 例如：在组件A的components节点下，注册了组件F。则组件F只能用在组件A中，不能用在其他的组件中。即如果组件C中如果没有用components注册组件F，那么就无法使用。如果一个组件频繁被用到，那使用起来非常地不方便。可以通过注册全局组件来方便使用。
在vue项目的main.js入口文件中，通过Vue.component()方法，可以注册全局组件。 示例代码如下：
代码语言：javascript复制//导入需要全局注册的组件
import Count from './components/Count.vue'
//Vue.component()的第1个参数为字符串，表示组件的注册名字.第2个参数为需要注册的组件对象
Vue.component('myCount',Count);五. 组件的props
当封装好的一个子组件被其他多个不同父组件使用时，会发现子组件内定义的data数据在所有的使用它的父组件内的数值都是一样的，假如我第一个父组件内引用的子组件的初始数据为1，另一个引用该子组件的父组件也会显示一。 例如，封装了一个子组件，里面显示data里面的num：1在页面上。我想把这个组件用在第一个父组件时显示1，让他用在第二个父组件时显示2，如果不用props，则无法实现，他们都会显示1。
下面是一个案例： 有一个子组件Count.vue，实现点击按钮后会对原始数据自动增加1的功能。但是使用它两个父组件对里面原有地初始值都不同。
代码语言：javascript复制<template>
<div>
<h5>count组件</h5>
<p>count的值为{{init}}</p>
<button @click="count = 1"> 1</button>
</div>
</template>
<script>
export default {
//props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
//自定义属性的名字可以自定义，比如下面的init（只要名字合法就行）
//谁用这个组件，就可以在组件内自定义这个init的值（父组件通过给子组件对props内定义的属性赋值即可）。eg：<mycount init="5"></mycount>
//props是只读的。不要直接修改props里面的值，否则终端会报错。
props:['init'],
data(){
return{
count:0
}
}
}
</script>
<style lang="less">
</style>props与data节点同级。
下面是两个父组件对它的调用： left组件：
代码语言：javascript复制<template>
<div>
我是left组件
<hr/>
<myCount :init='3'></myCount>
</div>
</template>
<script>
export default {
name: 'left'
}
</script>
<style>
div{
float: left;
width: 100px;
height: 100px;
}
</style><myCount init=‘3’>对组件的init值定义了一个值为3
right组件：
代码语言：javascript复制<template>
<div>
我是right组件
<hr/>
<myCount :init='8'></myCount>
</div>
</template>
<script>
export default {
name: 'Right'
}
</script>
<style>
div{
float: left;
width: 100px;
height: 100px;
}
</style><myCount init=‘8’>对组件的init值定义了一个值为8
效果：
上面有一个点要注意，就是我们使用<MyCount>组件给其设置一个init的props属性时，如果直接init=“8” ,这时设置的是一个字符串类型的init属性。如果要设置为数值的属性，就要为init添加v-bind属性绑定，即：<MyCount :init=“8”>或<MyCount v-bind:init=“8”> ，这时里面的init属性才是数值型。这时因为v-bind里面的值为js的字面量。1就是数值1，而不是字符串。
那么问题又来了，如何实现点击 1按钮后如何数值加一呢？可以通过this.init为count赋值,然后页面上渲染count就行了。 下面是更改后的Count.vue子组件：
代码语言：javascript复制<template>
<div>
<h5>count组件</h5>
<p>count的值为{{count}}</p>
<button @click="count =1"> 1</button>
</div>
</template>
<script>
export default {
//props是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值
//自定义属性的名字可以自定义，比如下面的init（只要名字合法就行）
//谁用这个组件，就可以在组件内自定义这个init的值（父组件通过给子组件对props内定义的属性赋值即可）。eg：<mycount init="5"></mycount>
props:['init'],
data(){
return{
count:this.init
}
},
}
</script>
<style lang="less">
</style>六.props的default默认值，
上面的的left和right在使用Count子组件的时候，都给它的init属性初始化绑定了一个默认的值，如：<myCount :init=‘8’>。但是如果有些用户如果就是不给Count组件的init属性初始化一个值呢（<myCount></myCount>）？如果不传值，有些时候就希望它能有一个默认的初始值了。
在声明自定义属性props时，可以通过default来定义属性的默认值。并且props不能用数组形式来定义，而是用对象的形式来定义。 示例代码如下：
代码语言：javascript复制export default {
props:{
自定义属性名:{
default:默认值
}
}
}如我们给Count组件中的init设定默认值为100：
代码语言：javascript复制<template>
<div>
<h5>count组件</h5>
<p>count的值为{{count}}</p>
<button @click="count =1"> 1</button>
</div>
</template>
<script>
export default {
props:{
init:{
default:100
}
},
data(){
return{
count:this.init
}
},
}
</script>
<style lang="less">
</style>七.prop的type值类型
在声明自定义属性时，可以通过type来定义属性的的值类型，如果用户传递过来的值不符合此类型，则会在控制台报错。 示例代码如下：
代码语言：javascript复制export default {
props:{
init:{
type:Number,
default:3
}
}
}八.props的require必填项
props属性里面的require是来规定某个属性是一个必填项,那怕组件的这个props属性有默认值，不自己手动传入，也会报错。
代码语言：javascript复制<script>
export default {
props:{
init:{
type:Number,
default:3,
require:true
}
},
data(){
return{
count:this.init
}
},
}
</script>九.组件组件的样式冲突问题
默认情况下，写在.vue组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是： 1.单页面应用程序俄中，所有组件的DOM结构，都是基于唯一的index.hml 页面来进行呈现的 2.每个组件中的样式，都会影响整个index.html页面中的DOM元素。
1.scoped的使用和底层实现原理
先来演示一下它的底层实现原理： 我们每个组件里面都标记上不同的data-v的自定义属性，然后通过[]属性选择器进行编写不用组件的样式 left.vue
代码语言：javascript复制<template>
<div data-va-001>
<h1 data-v-001>我是left组件</h1>
<hr/>
<myCount :init='0' data-v-001></myCount>
</div>
</template>
<script>
export default {
name: 'left'
}
</script>
<style>
h1[data-v-001]{
color: red;
}
div[data-v-001]{
float: left;
width: 100px;
height: 100px;
}
</style>right.vue
代码语言：javascript复制<template>
<div data-v-002>
<h1 data-v-002>我是right组件</h1>
<hr/>
<myCount data-v-002></myCount>
</div>
</template>
<script>
export default {
name: 'Right'
}
</script>
<style>
div[data-v-002]{
float: left;
width: 100px;
height: 100px;
}
</style>打开网页发现，只有left组件的h1变红了。
但是Vue帮助我们简化了，不用这么去写。只要给组件的style标签加上scoped就可以了。
代码语言：javascript复制<style scoped>
h1{
color: red;
}
div{
float: left;
width: 100px;
height: 100px;
}
</style>2.使用/deep/修改修改子组件中的样式
如果要在left组件里面把Count子组件的标题改为粉红色，把right组件里面的Count子组件保持原来的颜色。并且我们不要修改Count子组件里面的样式，该这么办呢？
代码语言：javascript复制<template>
<div>
<h1>我是left组件</h1>
<hr/>
<myCount :init='0'></myCount>
</div>
</template>
<script>
export default {
name: 'left'
}
</script>
<style scoped>
h5{
color: pink;
}
h1{
color: red;
}
div{
float: left;
width: 100px;
height: 100px;
}
</style>如果我们直接给left组件配置h5的样式的话，其实并不会生效，因为这个组件设置了scoped。
这时候就要用到/deep/了 进行如下的配置：
代码语言：javascript复制<style scoped>
/deep/ h5{
color: pink;
}
h1{
color: red;
}
div{
float: left;
width: 100px;
height: 100px;
}
</style>这时候就变成粉红色了
当使用第三方组件库的时候，如果有修改组件默认样式的需求，需要用到/deep/
