z609373067
z609373067

slot和$nextTick不解之缘

slot与nextTick与translation与v-show不解之缘

为什么会写这个东西呢，主要是再项目遇到了一个贼怪的坑。 
先来说明一下项目需求，我有一个滑动scroll组件,就是类似这样 wrapper是传给滑动库的一个元素，solt是插槽分发

 
  
     
   
    2.  
  
 
  
slot是什么呢? emmm slot怎么用 官方文档有 其实vue中数据是通过props传给子组件的，那么dom怎么办 要传一个 template模板数据嘛，在vue中是可以用slot分发dom的 
那slot到底是父组件的还是子组件的呢？ 
当然是父组件了，类比props，也是把父组件的某个数据传给子组件的。同理slot也是这样，儿子要吃饭，爸爸先占个座，等爸爸来了 就开饭，一个道理。。。 
可是儿子怎么知道爸爸的动向呢？
 
  
现在来继续讲需求 
我在父亲组件里
 
  
 
  
 
  
     
   
    2.  
   
  2. ...其余省略
    3.  
  
 
  
这里的somedata是计算属性或者异步获取的，标签里slot分发的dom也就是v-for异步加载的了，当然他得有数据 
这里的需求就是 我父组件的dom数据somedat变化之后需要将scroll里插件库调用refresh方法去更新一下高度或者宽度了。
 
  
ok开始解决 这多简单我在子组件里watch一下传进来的somedata变化不久好了
 
  
 
  
 
  
     
   
  1. //scroll.vue中
    2.  
   
  2. ...省略
    3.  
   
  3. props:{
    4.  
   
  4.  data:{
    5.  
   
  5.  type:Array,
    6.  
   
  6.  defalut:()=>[]
    7.  
   
  7.  }
    8.  
   
  8. }
    9.  
   
  9. watch:{
    10.  
   
  10.  data(){
    11.  
   
  11.  this.scroll.refresh();
    12.  
   
  12.  }
    13.  
   
  13. }
    14.  
  
 
  
这不就行了。。。 试试告诉我们并没有那么简单... 
实际这里dom并没有渲染，因为数据更新到dom变化是需要一些时间的。 
就好比 儿子等着吃饭 爸爸只是说我要来 但是没有坐好一样，还是不能开饭 
怎么办呢 
可能了解 nextTick的已经知道怎么解决了
 
  
 
  
 
  
     
   
  1. data(){
    2.  
   
  2.  this.$nextTick(()=>{
    3.  
   
  3.  this.scroll.refresh();
    4.  
   
  4.  }) //这里setTimeout也可以 
    5.  
   
  5. }
    6.  
  
 
  
emmmm nextTick是要去看vue源码的 这个之后会再写一篇博客讲明的 ，不懂nextTick可以先去查一下文档
 
  
这里父组件数据变化，scroll子组件监听到之后，等待下个轮询中 即slot里dom挂载完成后 调用。。。 嗯 一般使用ok 
scroll组件完成，真的是这样的吗? 
注意哦
 
  
 
  
 
  
     
   
  1.  :data="somedata">
    2.  
   
  2.   :somedata="somedata">
    3.  
   
  3.  
    4.  
   
    5.  
  
 
  
 
  
 
  
     
   
  1. //list.vue中
    2.