vue组件

1. 组件化开发

根据封装的思想，把页面上可复用的UI结构封装为组件，从而方便开发和维护。

2. Vue中的组件化开发

Vue.js是一个支持组件化开发的前端框架，规定组件的后缀名为.vue

3. Vue组件的组成部分

注意：按下面的顺序！！！

• template：组件的模板结构（UI结构）

  vue2.x中template节点内的DOM结构仅支持单个根节点

  vue3.x中支持多个根节点，就可以省略包裹性质的最外层的div了

• script：组建的js行为（js）

  注意默认的写法，一打script就会默认出来

  注意data，要用函数的形式，定义在return对象里！！

• style：组件的样式（css）

  默认是css语法，若想启用less等，则需要在style中添加lang属性，e.g. style lang=”less”

4. 组件间的关系

组件在封装好后，彼此之间是相互独立的，只是在使用组件的时候，根据彼此的嵌套关系，形成父子关系、兄弟关系。

5. 使用组件

• import导入组件
• 使用components节点注册组件
• 以标签形式使用注册好的组件

6.私有组件 v.s. 全局组件

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

  私有：若在组件A的components下注册了组件F，则组件F只能在组件A中使用，若组件C也想使用还需要上述三步骤

• 在main.js中通过Vue.component(标签名，注册的组件名)注册全局组件

  全局：在main.js中注册后可以直接在组件中用标签名进行使用

但是如果使用组件的不同父组件想要传递的初始值不同，怎么办？

7.组件的props

props是组件的自定义属性，在封装通用组件的时候，合理使用props可以提高复用性,props允许使用者通过自定义属性为组件指定初始值。

7.1 语法

export default {

​ props: [’自定义属性1‘，’自定义属性2‘，’自定义属性3‘…],

​ data() {

​ return {}

​ },

​ …

}

7.2 props v.s. data

首先，这两种都是vue中提供的存储变量的不同方法，那么区别是什么？

• data是每个组件内部的私有数据，只能在改组件内部使用
• props是从父组件传递给子组件的数据，可以进行读取，但不能修改

7.3 props的只读性

vue中规定组件封装的自定义属性是只读的，不能直接修改props的值

如果想要修改props的值，将props的值转存到data中，因为data中的数据就是可读写的了~

但是注意在父组件传参的时候！！！！！

不适用v-bind就会传入的是字符串！！！！

v-bind：init = 1

注意：只有当字符串传递的时候才不用v-bind！！

---

reference：https://blog.csdn.net/it1993/article/details/104468677

7.4 props的default默认值

在声明自定义属性时，可以通过default来定义属性的默认值

在7.3中，props在定义时以数组的形式，但是如果还想再额外的定义默认值，需要改造成对象的形式。

props: {

​ init: {

​ default: 0

}}

7.5 props的type值类型

type可以在封装组件时对外界传递进来的props数据进行合法性的校验

7.6 props的required必填项

注意: required和默认值default无关，哪怕设置了default，只要使用者没有传参就报错。

8.组件间的样式冲突问题

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

8.1 造成样式冲突的根本原因

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

8.2 如何解决？

• 办法一：给每个组件分配唯一的自定义属性，e.g. data-v-001，然后通过属性选择器来控制样式的作用域

  【缺点：所有的UI结构都需要编码并添加自定义属性，开发效率地下】

• 办法二： 给style节点添加scoped属性

  底层逻辑就是自动添加唯一的自定义属性

  style scoped

  那么给当前组件添加scoped属性，但对其子组件不生效怎么办？

• 办法三：样式穿透 /deep/

  /deep/ .title {xxx}