Vue 组件化学习（组件的基本使用，组件之间的数据传递，插槽slot）

1. 什么是组件?
   组件是一个单独功能模块的封装，有属于自己的HTML模板，也应该有属于自己的数据data ，还有methods；组件模板必须有一个根（常用div）

2. 组件的基本使用：（含语法糖，含模板抽离，含对象抽离）这里是局部组件注册方式

   基本步骤就是： 先创建一个组件mycpn，在里面写一个模板 template ，template通过 id 分离到页面上，之后将组件
   mycpn 放到 vue实例对象里面的components 属性里面 进行注册，这样就可以在页面中直接使用mycpn这个组件了

    ```javascript
    
      
      
   
        
      
      
    
      
   

3. 全局组件和局部组件
   全局组件 使用 Vue.component() 方法
   局部组件在vue实例里面创建 components 里面注册

4. 父组件和子组件
   按我自己的理解就是：有俩个组件（组件1和组件2），组件 1 ，2 分别有自己的模板template,组件1放到组件2里面注册（components下面）然后组件2 放到vue实例里面注册。二者都注册完之后，特别注意：组件1要在组件2模板里使用
   之后将组件2放到页面上使用时，就可以看到组件1和组件2。这就是所谓的父子组件，其中组件1为组件2的孩子。

5. 组件中数据的存放问题（data 属性里面存）

   1. 组件是不能直接访问Vue实例对象里面的数据的 ；

   2. 组件有自己存放数据的地方 data属性 ；

   3. 只不过 data 是一个函数而且返回的是一个对象 对象里面存放数据

   4. 原因：Vue让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响。

6. 组件通信—父组件向子组件传递数据
   方法: 在子组件中通过 props 来声明接收父组件的数据
   props 的值有俩种方式：
   方式一：字符串数组，数组中的字符串就是传递时的名称。
   方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

   对象方法用的较多（在子组件用v-bind绑定传值 : 子组件的数据=父组件的数据，:mymessage=‘message’ ）
   

   方式一：字符串数组

   方式二：对象

7. 组件通信—子组件向父组件传递 数据/事件（通过自定义事件）
   在子组件中，通过$emit()来触发事件。

   在父组件中，通过v-on来监听子组件事件。

   

   需求：我们之前做过一个两个按钮+1和-1，点击后修改counter。 我们整个操作的过程还是在子组件中完成，但是之后的展示交给父组件。
   这样，我们就需要将子组件中的counter，传给父组件的某个属性，比如total。

    
      
   
        
        
        
   点击次数 ： {{total}}
      
      
      
    
   

8. 组件访问—父组件访问子组件（$refs，少用 $children）
   $refs的使用

   1. $refs和ref指令通常是一起使用的。
   2. 首先，我们通过ref给某一个子组件绑定一个特定的ID。在父组件模板里，找到子组件的使用并绑上ID。
   3. 其次，通过this.$refs.ID就可以访问到该组件了。

   

    
      
   
        
        
        点击
      
      
      
      
    
   

9. 组件访问—子组件访问父组件（$root 直接访问祖宗，避免多重套娃的连锁反应 少用 $parent）子访问父 在子模板里写操作
   

10. slot 插槽的基本使用
    作用：以让使用者根据自己的需求，决定插槽中插入什么内容 是搜索框，还是文字，还是菜单。由调用者自己来决定
    使用： 就是在子组件的模板里添加一个 标签

    
     
    
       
         百度
       
       
         
    这是我替换插槽的内容 哈哈哈哈哈
       
       
     
     
     
    

11. 具名插槽的使用（这里使用Vue 3 的 v-slot ）
    注意: v-slot 是在组件里面添加一个 template 标签 然后在这个标签里写v-slot 并不是在 模板里面写v-slot v-slot: 的语法糖为 #
    注：区分俩个template的不同

12. 作用域插槽 (父组件替换插槽的标签，但是内容由子组件来提供)
    使用场景：父组件向子组件拿数据
    我们选择将包含所有插槽prop的对象命名为 slotProps
    需求：

    子组件中包括一组数据，比如：pLanguages: [‘JavaScript’, ‘Python’, ‘Swift’, ‘Go’,‘C++’]
    需要在多个界面进行展示： 某些界面是以水平方向一一展示的， 某些界面是以列表形式展示的， 某些界面直接展示一个数组

    这里也使用 Vue3 的 v-slot:default = 'slotProps' 子组件模板template里的 slot 用 :data='子组件里的数据' 来绑定数据
    

    

13. 编译的作用域
    父组件模板的所有东西都会在父级作用域内编译；
    子组件模板的所有东西都会在子级作用域内编译；
    就近原则，往上查 。
    在谁家用谁的东西，在vue模板就去找vue实例 ，组件的模板找自己的作用域。

14. 不懂就看官方文档：https://v3.cn.vuejs.org/