vue教程实践

1 作用域插槽

含义
作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。通过下列展示作用域插槽的使用方式。
场景
多个相同子组件需要不同的渲染方式的情况下使用
注意
只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法
示例

结果

动态插槽名
如果要使用动态插槽名，需要在父组件上和v-slot处做相应处理。比如给父组件的data增加一个dynamicname属性且值为other后，v-slot:[dynamicname]='slotProps’就会渲染出上例一样的效果。

2 过渡

2.1 过渡模式

以按钮滑动过渡为例

  
    
    
    
    
    
    
  

  
    

      
        on
        off
      
    
    
  

2.2 多个组件过渡

采用动态组件实现

  

    A
    B
    
      
    
  
  

2.3 FLIP动画多维网格过渡

 
    
    

      shuffle
      
        

          {{ item.number }}
        
      
    
    

记录：

1. 设置了flex布局之后发现还是单列形式，结果最后发现问题在于元素选择错误，把按钮也包括进去了。
2. 这里cells的生成方式是比较规范的一种，Array.apply(null,{length:9}).map(function(current,index){return {id:index,number:index%9+1}})，采用Array.apply生成的数组与直接new Array()得到的数组是不一样的，后者只有length:9，相当于分配了空间，而前者却是0-8每个元素值都为undefined。