组件开发原则

原则:可复用、可组合;

两大类:页面组件、功能组件;

组件职责

约束好组件的职责,能让组件更好地解耦,知道什么功能是组件实现的,什么功能不需要实现。

组件可以分为通用组件(可复用组件)和业务组件(一次性组件)。

可复用组件实现通用的功能(不会因组件使用的位置、场景而变化):

  • UI 的展示
  • 与用户的交互(事件)
  • 动画效果

业务组件实现偏业务化的功能:

  • 获取数据
  • 和 vuex 相关的操作
  • 埋点
  • 引用可复用组件

可复用组件应尽量减少对外部条件的依赖,所有与 vuex 相关的操作都不应在可复用组件中出现。

组件应当避免对其父组件的依赖,不要通过 this.$parent 来操作父组件的示例。父组件也不要通过 this.$children 来引用子组件的示例,而是通过子组件的接口与之交互

 

命名空间

可复用组件除了定义一个清晰的公开接口外,还需要有命名空间。命名空间可以避免与浏览器保留标签和其他组件的冲突。特别是当项目引用外部 UI 组件或组件迁移到其他项目时,命名空间可以避免很多命名冲突的问题。

  1.  
    <xl-button></xl-button>
  2.  
    <xl-table></xl-table>
  3.  
    <xl-dialog></xl-dialog>
  4.  
    ...

业务组件也可以有命令空间,跟通用组件区分开。这里用 st (section) 来代表业务组件。

  1.  
    <st-recommend></st-recommend>
  2.  
    <st-qq-movie></st-qq-movie>
  3.  
    <st-sohu-series></st-sohu-series>
     

    上下文无关

    还是上面那句话,可复用组件应尽量减少对外部条件的依赖。没有特别需求且单个组件不至于过重(重复使用的话)的的前提下,不要把一个有独立功能的组件拆分成若干个小组件。

    1.  
      <table-wrapper>
    2.  
      <table-header slot="header" :headers="exampleHeader"></table-header>
    3.  
      <table-body slot="body" :body-content="exampleContents"></table-body>
    4.  
      </table-wrapper>

    TableHeader 组件和 TableBody 组件依赖当前的上下文,即 TableWrapper 组件嵌套的环境下。你可以有更好的解决办法:

    <xl-table :headers="exampleHeader" :body-content="exampleContents"></xl-table>

    上下文无关原则能够降低组件使用的门槛。

     

    vue开发可复用组件

     
    组件,是一个具有一定功能,且不同组件间功能相对独立的模块。高内聚、低耦合。
     
    开发可复用性的组件应遵循以下原则:
     
    1.规范化命名:组件的命名应该跟业务无关,而是依据组件的功能命名。
    2.数据扁平化:定义组件接口时,尽量不要将整个对象作为一个 prop 传进来。每个 prop 应该是一个简单类型的数据。这样做有下列几点好处:
       (1) 组件接口清晰。(2) props 校验方便。(3) 当服务端返回的对象中的 key 名称与组件接口不一样时,不需要重新构造一个对象。
    扁平化的 props 能让我们更直观地理解组件的接口。
    3.可复用组件只实现 UI 相关的功能,即展示、交互、动画,如何获取数据跟它无关,因此不要在组件内部去获取数据。
    4.可复用组件应尽量减少对外部条件的依赖。
    5.组件在功能独立的前提下应该尽量简单,越简单的组件可复用性越强。
    6.组件应具有一定的容错性。
     
     

    父组件向子组件传值:

    父组件:

    1.在子组件标签上传入数据

    <tabcard :tabcarddata="largeclass"></tabcard>//tabcarddata为数据名称,largeclass为json数据

    子组件:

    1.子组件通过props接受数据

    export default {
      props: {
        tabcarddata: {}
      }
    }

    2.数据调用

    {{tabcarddata.name}}
    

    子组件向父组件传值:

    父组件:

    父组件向子组件传递一个方法

    <datePickers  v-on:datatime="datatime" >
    

    该方法为:(作用为将方法获取的值赋值给data)

    datatime(theTime){
            this.modifyModel.DJSJ = theTime;
          }
    

    子组件:

    在子组件调用父组件的方法,将值通过父组件传递的方法传给父组件。

    this.$emit('datatime',this.date);
    
    datatime为调用的方法名,
    this.date为传回去的参数
posted @ 2018-06-08 09:27  幻城love  阅读(818)  评论(0编辑  收藏  举报