Vue实战项目开发--深入理解vue组件

项目的源代码在GitHub上：点击查看

组件使用的细节点

• 使用is属性解决模板标签上出现bug的情况
• 在子组件定义data时，data必须是一个函数，而不能是一个对象（因为子组件会多次调用，每个子组件享用自己的数据，而不是像根组件享有一套数据，通过函数来返回数据，就是让每个子组件拥有独立的数据）
• ref：可以在子组件上定义不同的ref，然后就可以通过引用来取得子组件的数据

    注意：另外的两个案例的代码在GitHub上

    
    
    



    

        
                //通过is属性，让子组件显示出来，也满足h5的编码规范
                
    

    

父子组件的数据传递

• 父组件向子组件传值都是通过属性来传递的，子组件通过props来接受（单向数据流：子组件只能用父组件传递过来的参数，不能修改父组件传递过来的内容）
• 子组件向父组件传值是通过事件的形式，把触发的事件向父组件传递

    
    
    



    

        
        
        
{{total}}
    

    

组件参数校验与非props特性

required：确定父组件是否必须先向子组件传值

default：默认值，如果父组件没有向子组件传值，就显示默认值

validator：自定义校验器

非props特性：

• 子组件没有定义props来接受父组件传递来的参数，就引起非props特性
• 申明了一个非props特性，这个属性会展示在子组件的dom标签上

非父子组件间的传值

• 可以通过vue的vuex框架实现非父子组件间的传值
• 总线机制：发布-订阅模式

注意：子组件不能直接改变父组件穿的值，不然会报错，因为要满足单向数据流

在Vue中使用插槽

• 通过插槽，可更方便地向子组件传递dom元素，同时子组件使用这个插槽也很简单
• 通过使用具名插槽，可以插入你想插入地内容
• 作用域插槽：父组件调用子组件的时候，给子组件传了一个插槽(作用域插槽，这个插槽必须是template结尾的，还需要申明父组件接受子组件的数据放在那里的，还给子组件的模板的信息)，当子组件做循环或者某一部分时，它的DOM结构由外部传递时

    
    
    



    

        
            
Dell
        
    

    

作用域插槽：

动态组件和v-once指令

• 通过componet可以实现动态组件效果，
• v-once：可以提高静态资源的展示效率，并且把组件放在内存中

    
    
    



    

        
        

        
        
        change