Vue组件

组件（对ui结构的复用）

vue规定组件的后缀名必须是.vue

三个组成部分

• template：组件的模板结构
• script：组件的JavaScript行为
  • 注意有一个不同点.vue组件中的data不能指向对象，必须是一个方法，在return{}里面定义数据
• style：组件的样式

<template>
  <div class="test-box">
    <h3>自定义---{{ username }}</h3>
    <button @click="changeName">修改</button>
  </div>
</template>


<script>
//固定写法，默认导出
export default {
  //.vue组件中的data不能指向对象，必须是一个函数
  data() {
    //这个return出去的{}中，可以定义数据
    return {
      username: "zs",
    };
  },
  methods: {
    changeName() {
      //this指向当前组件的实例对象
      this.username = "new";
    },
  },
  //当前组件中的侦听器
  watch: {},
  //计算属性
  computed: {},
  //过滤器
  filters: {},
};
</script>


//启用less
<style lang="less">
.test-box {
  background-color: pink;
}
</style>

组件之间的父子关系

组件在封装好之后都是独立的

但是组件在使用时，根据彼此的嵌套关系，形成了父子关系、兄弟关系

使用组件的三个步骤

私有组件

注：components注册的是私有组件（上面的方法）

在组件A的components节点注册的组件，只能在组件A使用

全局组件

在main.js中

//1.import
//2.Vue.component('新名字',组件名)
import Count from '@/components/Count.vue'
Vue.component('MyCount', Count)

组件的props

基本用法

props属性是自定义属性，允许使用者通过自定义属性，为当前组件指定初始值

封装者

export default{
	//组件自定义属性，数组格式
	props:['自定义属性A','自定义属性B',...],
	
	//props的对象格式
	props:{
		自定义属性:{
		//如果使用者没有穿值，则使用default
			default:0,
		//规定用户传入参数的类型，type，不符合会报错
			type:Number
		//必选项校验（必须传值）
			required:true
		
		}
	}
	
	data(){
		return{}
	}
}

使用者

//注意：如果不加:代表""里面是字符串，加上:是属性选择器，里面是js语言，里面的数字就是数字
<组件名 :自定义属性名=""></组件名>

• props的数据和data一样，可以被直接使用
• props是只读的（其实可以修改，但是不符合vue规定）
  • 我们可以通过this将数据转存到data中，这样就可读可写了

例子：在全局组件Count.vue（MyCount）中

export default{
	//数组格式
	//props:['init'],
	//对象格式，可以使用props校验
	props:{
		init:{
			default:0,
			type:Number,
			required:true
		}
	}
	//如果prop属性值的类型不唯一，可以通过数组指定多个可能的类型
	props:{
		init:[String,Number],
	}
	//prop属性害可以指定自定义的验证函数
	
	data(){
		return{
			count:this.init
		}
	}
}

使用场景

props是组件的自定义属性，在封装通用组件时，可以极大的提高组件的复用性。

文章信息的标题可以被封装成props，定义个属性title，传进什么内容渲染什么

组件之间的样式冲突

因为所有组件最后都会渲染到一个html页面，所以单个组件的样式会影响到全局

scoped

解决原理：

给当前组件所有的元素都加一个相同的自定义属性，下方样式使用属性选择器

//vue使用scoped直接帮我们给当前组件每个元素加了自定义属性
<style scoped>

/deep/

当使用第三方组件库时，如果有修改默认样式的需求，常用/deep/

本质为自定义属性选择器

/deep/ 选择器

例子

left.vue

  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    //使用MyCount组件
    <MyCount :init="9"></MyCount>
  </div>
  
<style lang="less" scoped>
/deep/ h5 {
  color: pink;
}
</style>

left组件使用scoped为他的元素都绑定了自定义属性data-v-xxxxx

但是我想通过left组件修改MyCount组件里h5的颜色，则使用

<style lang="less" scoped>
/deep/ h5 {
  color: pink;
}
</style>

/deep/ h5选择器的渲染到html页面实际为

[data-v-3c83f0b7] h5，因此能选择到MyCount组件的h5