vue-组件的总结

组件

全局组件

局部组件

父传子

通过prop向子组件传递数据

   

         //@key
   
 
   

   

子传父

通过$emit 事件泡发

   

       {{parent_count}}
        //@key
   

   

非父子

非父子组件之间进行通信，用 中央事件总线 eventbus

中央总线的特点，只要订阅了，触发的时候就能收到通知

动态组件

通过 Vue 的 component 元素加一个特殊的 is 属性来实现

   
   
  
   
     {{tab}}
   
 

 

keep-alive

在动态组件上使用keep-alive

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 `` 元素将其动态组件包裹起来

 

   
   
     
   
   
   
     {{tab}}
   
 

 

在组件上使用v-model

这个组件内的 input必须：

• 将其 value attribute 绑定到一个名叫 value 的 prop 上
• 在其 input 事件被触发时，将新的值通过自定义的 input 事件抛出

• 自己实现的v-model

    

        
{{username}}
        
        
        
    

• v-model

    

        
{{username}}
        
    

自定义组件

自定义组件的v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突，改变默认值

    

        {{checkvalue}}
        
    

.sync修饰符

• sync 代码

    

        {{name}}
        
    

• 上面sync的代码实现的功能和下面这些代码一样

    

        {{name}}
        
    

插槽

具名插槽

意思就是起了名字的插槽

   

       
           

           

           
footer
       
   
   

作用域插槽

有时让插槽内容能够访问子组件中才有的数据是很有用的

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的

   

        //default是插槽的名字，default 可以省略掉
           {{obj.myname}}
       
   

后备内容

意思其实就是默认值

 

   确定
 

 

prop

处理边界情况

访问根 和父级组件实例

意思是子组件拿父组件的数据

通过parent

访问子组件实例

意思是父组件拿子组件的数据

尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 这个 attribute 为子组件赋予一个 ID 引用

依赖注入

provide 选项允许我们指定我们想要提供给后代组件的数据/方法，然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性

(注意不是响应式)

访问元素

 

    //@key
 

 

组件的生命周期

   

       {{username}}
        
   
   



打印出来的结果是：
root beforeCreate
root created
root beforeMounted
child beforeCreate
child created
child beforeMounted
child mounted
root mounted
root beforeUpdate
root updated

root beforeDestory
child beforeDestory
child destoryed
root destoryed

组件之间传递数据的总结

• props emit

  ​ 缺点：如果组件嵌套层次多的话，数据传递比较繁琐

• provide inject(依赖注入)

  缺点：不支持响应式

• root， parent refs

• eventbus

  缺点：数据不支持响应式