Vue组件（注册，使用，自定义属性，样式）

2023-11-12 19:16:52

组件的使用

需要使用一个组件的时候，需要进行一下几个步骤：

使用import导入相应需要使用的组件 import Xxx from '@/components/Xxx.vue'
使用components节点注册组件

export default {
  components: {
    Xxx
  }
}

用标签的形式使用刚才的组件

组件的注册

私有组件

使用components标签进行注册的组件是私有组件，除了自己意外，其他组件不能使用这个被注册的组件

// 导入需要被使用的组件
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    // 将组件进行注册
    HelloWorld
  }
}

全局组件

在vue项目中main.js文件中，通过Vue.component()方法，将组件注册为全局组件

// 导入需要被全局注册的组件
import Count from '@/components/count.vue'
// 对组件进行全局注册
Vue.component('Count', Count)

组件的props（自定义属性）

props是组件的自定义属性，使用此属性，可以让组件在使用时候，拥有不同的初始值，提高组件的复用性

需要注意的是：我们使用init="9" 则init的值为一个字符串‘9’，如果我们需要传过来的值为数，则需要使用:init="9"，使用Vue中的属性绑定，使用Vue进行绑定，那么双引号中的内容相当于JS内容，所以会被认定为数字9

在日常的使用中，我们需要注意，props中的值是只读的，我们不能对其进行修改，如果我们需要对其进行修改，则可以将其值赋值到data中，然后再进行修改。如果没有对init属性进行传值，那么init默认值为undifined

组件props属性的默认值

在声明自定义属性时候，可以使用default属性设置默认值。如果没有对自定义属性进行传值，那么init默认值为undifined

明确规定传入值的类型，值类型有：Number, Boolean, String, Array, Object等

组件props属性的必填项

规定了组件的必填选项之后，就算对属性设置了默认值，要是在调用的时候没有传入默认值，也会报错。

组件之间的样式冲突避免（样式隔离）

在默认情况下，写在.vue组件中的样式会全局生效，因此容易导致多个组件之间造成样式冲突
导致冲突的根本原因：

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

在style标签之后加上一个限定范围的属性，则这个style样式集则不会被全局使用

在父组件中修改子组件的样式（样式穿透）

在需要修改的属性前面添加/deep/属性，则可以达到修改子组件样式的效果。
主要用途是在当我们使用第三方库的时候，我们需要修改库提供的默认样式，则需要用到这个修改属性
当我们使用/deep/做修饰的时候，会被处理为[data-v-xxx] h5，这里权值为什么高于子组件自带样式还没明白

样式隔离和样式穿透的实现原理

在我们添加scoped进行样式隔离的时候，我们的Vue处理程序会对当前组件的所有标签添加一个属性data-v-xxxx，而在此组件的所有样式选择器之后，也会添加相应的[data-v-xxxx]，通过这样的方法实现精准选择。而不是此组件中的标签和样式，都不会被添加这个精准选择的属性。

需要注意的是，父组件中使用了scoped属性之后，会为组件自身的所有标签添加data-v-xxx，并且也会对子组件的根节点也添加相应的data-v-xxx属性，用于实现样式穿透。