思路:1. 组件的好处,重用性2. 组件对的slot用法3. 子如何调用父的数据4. 子如何触发父的方法执行5. 父如何触发子的方法执行6. 如何创建组件和销毁自建--如何缓存避免每次切换创建

研究一下组件的销毁

- componet是vue内置命令,用于调用显示子组件is="home": 根据组件名html通过is=""获取.如下我定义了两个组件,home,list,然后我在html里将2个组件显示出来componet事实上是创建了组件.
    
    
     
显示组件
    
         
     
    

- 想要实现两个radio动态切换,类似页卡效果- componet事实上是创建了组件.那么如何销毁组件呢1.数据绑定到2个radio(注2个radio用value标识为一组)2.componet获取radio的值作为自己获取的组件名    1.动态获取:is="radio"
    
    
     
组件动态切换
    home: 
         list: 
      
     
    
     
    

- 用vue生命周期函数,研究下切换componet时候,每次都存在创建,销毁, 浪费资源了.    1.使用created/mounted 标识创建前动作    2.使用beforeDestory   标识销毁前动作- keep-alive命令缓存componet,不至于每次都销毁创建, 节约资源.
    
    
     
组件动态切换
    home: 
         list: 
      
     
    
             
          
     
    

1.先子组件的mounted    1,异步的,不会等dom渲染    2.在父组件的mounted3.如果父操作子类的dom,要加上nextTick才能保证同步.(即子选mounted,后渲染,然后父mounted获取到子渲染后的数据)

mounted(){    console.log(this.$refs.child.$el.innerHTML); //
1
2
3
},

mounted(){    this.$nextTick(()=>{ // 想操作dom 就加一个nextTick        console.log(this.$refs.child.$el.innerHTML); //
4
5
6
    })},

pannel栗子

  
        
    
    
  
         
      
       这是一篇vue的使用
      
    
      
       内容区      
       
组件的属性传递
      
       
slot的用法
      
       
ref的使用
      
       
nextTick的用法
    
      
    
      
       作者:zfpx
      
  
     
    
    

pannel-for

    
            
    
    
    
             
      
       
      
        
      
       {
   {article.content}}
      
        
      
       {
   {article.auth}}