vue 组件化开发 父子组件间的数据传递 插槽的使用

组件化开发    每个组件都是一个单独的vue文件

     组件的分类   全局组件   局部组件

   全局组件  在全局中导入 注册 

// main.js中
 
  // 引入组件  
    import 自定义组件名 from '路径'
  
  // 注册组件
     Vue.component('自定义组件的标签名','导入的组件名')

   局部组件  在单独的 vue 文件中  导入注册

// 导入组件
   import 自定义组件名 from '路径'

// 注册组件 
   components:{'自定义标签名','自定义组件名' }

 组件注册完成后    在要使用组件的vue文件中 的 template 中书写自定义的标签名 使用组件

父子间的数据传递

子传父    

// 父组件
    <子组件标签  @自定义事件="回调函数">
        
      回调函数(val){
       // val 子组件传回的数据
     }

// 子组件
    // 函数中使用   $emit 会触发父组件的自定义事件
    this.$emit('父组件自定义事件名',传递的参数)

父传子

 //  父组件传递数据 
     

    // 子组件接收:   接收到的数据可以直接使用

    // 简单方式 
             props:['自定义属性名']

    // 复杂方式  
              props：{  
                        type:'定义传入的数据类型',
                        required:true   // 设置为必传项
                        validapor(val){
                            // 判断传入的数据是否满足条件  返回布尔值
                            // 参数 val 是传入的数据  
                            return //验证通过返回 true 反正则为false
                         }
                   }

 关于在子组件中修改父组件数据的问题

1：vue不支持子组件修改父组件数据  但实际上可以修改 但会有警告

2：修改简单数据类型 或 直接修改复杂类型数据 才会发出警告

3：间接修改复杂数据  不会有警告 js的特性（涉及到数据存储的堆与栈）

结论 只有在修改栈中的数据时vue 才能发出警告 

插槽     父组件向子组件传递页面结构

分类   默认插槽    具名插槽    作用域插槽

  默认插槽      只能存在一个

  // 父组件中
     <子组件标签> 传入到子组件中的页面结构 


  // 子组件中 
         // 接收父组件传入的结构

   具名插槽    可以存在多个 相当于给插槽起了个名字

  // 父组件中    v-slot 可以简写为 #    给插槽一个名
    <子组件标签> 
        
        
    


  // 子组件中     使用name 查找插槽
      
      

作用域插槽  在具名插槽的基础上可以有子组件向父组件 传递数据

  // 父组件中    v-slot:自定义插槽名="回传的自定义属性名"
    <子组件标签>
    或

    


  // 子组件中     使用name 查找插槽   使用自定义属性回传数据
      
     

如果子组件传递的数据是一个数组     父组件接收时

                          回传的属性名.row  拿到数组中的每一项

                          回传的属性名.index 拿到数组的索引