组件、全局组件、动态组件

组件

由tmplate script style 构成

组件中的模板中只能有一个div(根节点)

启用less语法 使用<style lang="less">

组件在被封装好后,彼此之间是独立的

在使用组件时,根据嵌套关系,形成父子、兄弟关系

通过componets 注册的是私有子组件

例如:在a中的components节点下注册f,f只能在a中使用

全局组件

在main.js 中导入该组件,调用Vue.component

props 中的自定义参数是只读的不能修改,不然会报错

props可以设置默认值 type ,required(必填项)

 例如:props:{

      init:{

          default:0,

          type:number,

          required:true

    }

  }

 

在style 后面加上scoped可以防止样式冲突

当使用第三方组件库的时候,如果有修改第三方组件库的需求,需要用到/deep/

子组件向父组件共享数据使用自定义事件

父向子用自定义属性

兄弟之间用eventbus

组件的$nextTick(cb)方法,会把cb回调到下一个dom更新周期之后执行

动态组件

keep alive 保持组件存活 ,keepalive 可以把内部的组件进行缓存,而不是销毁,当组件被缓存时,会触发组件的deactivated生命周期函数,当组件被激活时会自动触发组件的activated函数,只希望某个组件被缓存,用到include 属性,不希望某组件被缓存用exclude

posted @ 2023-03-07 23:36  guorunbin  阅读(24)  评论(0编辑  收藏  举报