vue3学习6：组件的全局注册和局部注册，:deep()

vue 是一个完全支持组件化开发的框架。vue 中规定组件的后缀名是 .vue。
每个 .vue 组件都由 3 部分构成，分别是：
⚫ template -> 组件的模板结构
⚫ script -> 组件的 JavaScript 行为
⚫ style -> 组件的样式
其中，每个组件中必须包含 template 模板结构，而 script 行为和 style 样式是可选的组成部分。

vue 中注册组件的方式分为“全局注册”和“局部注册”两种，其中：
⚫ 被全局注册的组件，可以在全局任何一个组件内使用
⚫ 被局部注册的组件，只能在当前注册的范围内使用

全局注册组件是在main.js里进行注册
举个栗子
首先写了一个vue组件

<template>
<div id="HiVue">
  <h1>Hi Vue！！！</h1>
</div>
</template>

<script>
export default {
  name: "HiVue",
}
</script>

<style scoped>

</style>

在main.js注册，使用 app.component() 方法注册的全局组件，直接以标签的形式进行使用即可：

import { createApp } from 'vue'
import App from './App.vue'
import HiVue from "@/components/HiVue";

createApp(App).mount('#app')
App.component('HiVue',HiVue)

在app.vue测试

<template>
  <div id="app">
      <hi-vue></hi-vue>
      <br>
      <HiVue></HiVue>
    </div>
</template>

<script>

import HiVue from "@/components/HiVue";
export default {
  name: 'App',
  components: {HiVue},
}
</script>

显示如下：

局部注册组件
只需要在需要用的vue中加即可：

<template>
  <div id="app">
      <hi-vue></hi-vue>
      <br>
      <HiVue></HiVue>
    </div>
</template>

<script>

import HiVue from "@/components/HiVue";
export default {
  name: 'App',
  components: {HiVue},
  data(){
    return{
      list: [
            { id: 1, name: 'jenny' },
            { id: 2, name: 'danny' },
          ],
    }
  },
  methods:{
  }
}
</script>

加入：import HiVue from "@/components/HiVue";和components: {HiVue},即可

定义组件时App.component('HiVue',HiVue)，其中‘’中注册的是Hivue，可以用HiVue，hi-vue调用，但也可以写成App.component(HiVue.name,HiVue)。

需要注意的是style 节点的 scoped 属性，为了提高开发效率和开发体验，vue 为 style 节点提供了 scoped 属性，从而防止组件之间的样式冲突问题，写成：<style scoped>
如果给当前组件的 style 节点添加了 scoped 属性，则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效，可以使用:deep() 深度选择器

举个栗子：

<template>
<div id="HiVue">
  <h1 class="styh1">Hi Vue！！！</h1>
</div>
</template>

<script>
export default {
  name: "HiVue",
}
</script>

<style scoped>

</style>

在app.vue调用deep：

:deep(.styh1){
  color: blue;
}