一、vue组件

1.1、什么是组件化开发

组件化开发指的是：根据封装的思想，把页面上可重用的UI结构封装为组件，从而方便项目的开发和维护。

1.2、vue中的组件化开发

vue是一个支持组件化开发的前端框架。
vue中规定：组件的后缀名是.vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。

1.3、vue组件的三个组成部分

每个 .vue 组件都由3部分构成，分别是：

• template -> 组件的模板结构
• script -> 组件的JavaScript行为
• style -> 组件的样式

其中，每个组件中必须包含 template 模板结构，而script行为和style样式是可选的组成部分。

1.3.1、template

vue规定：每个组件对应的模板结构，需要定义到 <template>节点中。

<template>
	<!-- 当前组件的 DOM 结构，需要定义到 template 标签的内部 -->
</template>

注意：

• template 是 vue 提供的 容器标签，只起到包裹性质的作用，它不会被渲染为真正的 DOM 元素
• template 中只能包含唯一的根节点

1.3.2、script

vue 规定：开发者可以在 <script>节点中 封装组件的JavaScript业务逻辑。
<script> 节点的基本结构如下：

<script>
	// 今后，组件相关的 data 数据、methods 方法等。
	// 都需要定义到 export default 所导出的对象中。
	export default {}
</script>

.vue 组件中的 data 必须是函数
vue规定：.vue组件中的data必须是一个函数，不能直接指向一个数据对象。
因此在组件中定义data数据节点时，下面的方式是错误的：

data: { // 组件中，不能直接让 data 指向一个数据对象（会报错）
	count: 0
}

会导致多个组件实例共用同一份数据的问题，请参考官方给出的示例：
https://v2.cn.vuejs.org/v2/guide/components.html
data 必须是一个函数

1.3.3、style

vue 规定：组件内的 <style> 节点是可选的，开发者可以在<style>节点中编写样式美化当前组件的UI结构。
<style> 节点的基本结构如下：

<style>
	h1 {
		font-weight: normal;
	}
</style>

让 style 中支持 less语法
在<style>标签上添加lang="less"属性，即可使用 less 语法编写组件的样式：

<style lang="less">
	h1 {
		font-weight: normal;
		span {
			color: red;
		}
	}
</style>

1.3.4、案例

通过 vue-cli生成项目后，编写案例：

Test.vue

<template>
    <div>
        <div class="test-box">
            <h3>这是用户自定义的 Test.vue --- {{ username }}</h3>
            <button @click="changeName">修改用户名</button>
        </div>
    </div>
</template>

<script>
// 默认导出。这是固定写法
export default {
    // data  数据源
    // 注意：.vue 组件中的 data 不能像之前一样，不能指向对象。
    // 注意：组件中的 data 必须是一个函数
    data() {
        // 这个 return 出去的 { } 中，可以定义数据
        return {
            username: 'admin'
        }
    },
    methods: {
        changeName() {
            // 在组件中， this 就表示当前组件的实例对象
            console.log(this)
            this.username = '张三疯'
        }
    },
    // 当前组件中的侦听器
    watch: {

    },
    // 当前组件中的计算属性
    computed: {

    },
    // 当前组件中的过滤器
    filters: {

    }
}
</script>

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

main.js

// 导入 vue 这个包，得到 Vue 构造函数
import Vue from 'vue'
// 导入 App.vue 根组件，将来要把 App.vue 中模板结构，渲染到 HTML 页面中
// import App from './App.vue'
import Test from './Test.vue'

Vue.config.productionTip = false

// 创建 Vue 的实例对象
new Vue({
  // 把 render 函数指定的组件，渲染到 HTML 页面中
  render: h => h(Test),
}).$mount('#app')

// Vue实例的 $mount()方法，作用和 el 属性完全一样！

组件中的 data 必须是一个函数

单文件组件template中根元素只能有一个

1.4、组件之间的父子关系

1.4.1、使用组件的三个步骤

案例：
打开DEMO-1的项目，并通过npm i命令，下载所依赖的第三方组件。

配置代码提示

// 导入文件时是否携带文件的扩展名
"path-autocomplete.extensionOnImport": true,
// 配置 @ 的路径提示
"path-autocomplete.pathMappings":{
	"@":"${folder}/src"
}

1.4.2、通过 components 注册的是私有子组件

例如：
在组件A的 components 节点下，注册了 组件F。
则组件F 只能用在组件A 中；不能被用在组件C中。

1.4.3、注册全局组件

在 vue项目的 main.js入口文件中，通过 Vue.component()方法，可以注册全局组件。示例代码如下：

import Vue from 'vue'
// 导入需要全局注册的组件
import Count from '@/components/Count.vue'

// 参数1：字符串格式，表示组件的"注册名称"
// 参数2：需要被全局注册的那个组件
Vue.component('MyConut', Count)

二、组件的props

props是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！
它的语法格式如下：

export default {
	// 组件的自定义属性
	props: ['自定义属性A', '自定义属性B', '其它自定义属性...'],

	// 组件的私有数据
	data() {
		return { }
	}
}

2.1、props是只读的

vue规定：组件中封装的自定义属性是只读的，程序员不能直接修改props的值。否则会直接报错：

要想修改 props的值，可以把props的值转存到 data中，因为data中的数据都是可读可写的！

props: ['init'],
data() {
	return {
		count: this.init // 把 this.init 的值转存到 count
	}
}

注意：props是只读的，不要直接修改 props的值，否则终端会报错！

2.2、props的default默认值

在声明自定义属性时，可以通过default来定义属性的默认值。示例代码如下：

export default {
	props: {
		init: {
			// 用default属性定义属性的默认值
			default: 0
		}
	}
}

2.3、props的type值类型

在声明自定义属性时，可以通过type来定义属性的值类型。示例代码如下：

export default {
	props: {
		init: {
			// 用default属性定义属性的默认值
			default: 0,
			// 用 type 属性定义属性的值类型
			// 如果传递过来的值不符合此类型，则会在终端报错
			type: Number
		}
	}
}

2.4、props的require必填项

在声明自定义属性时，可以通过require选项，将属性设置为必填项，强制用户必须传递属性的值。示例代码如下：

export default {
	props: {
		init: {
			// 值类型为 Number 数字
			type: Number,
			// 必填项校验
			required: true
		}
	}
}

三、组件之间的样式冲突问题

默认情况下，写在 .vue 组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。

导致组件之间样式冲突的根本原因是：

1. 单页面应用程序中，所有组件的DOM结构，都是基于唯一的index.html页面进行呈现的。
2. 每个组件中的样式，都会影响整个 index.html 页面中的DOM元素

3.1、思考：如何解决组件样式冲突的问题

为每个组件分配唯一的自定义属性，在编写组件样式时，通过属性选择器来控制样式的作用域。示例代码如下：

<template>
  <div class="container" data-v-001>
    <h3 data-v-001>轮播图组件</h3>
  </div>
</template>

<script>
export default {

}
</script>

<style>
/* 通过中括号"属性选择器"，来防止组件之间的"样式冲突问题"
    因为每个组件分配的自定义属性是“唯一的” */
.container[data-v-001] {
    border: 1px solid red;
}
</style>

3.2、style节点的 scoped 属性

为了提高开发效率和开发体验，vue为style节点提供了scoped属性，从而防止组件之间的样式冲突问题。

3.3、/deep/样式穿透

如果给当前组件的 style 节点添加了 scope的属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用 /deep/ 深度 选择器。