高级前端-Vue组件世界

1. 自定义指令

2. 数据双向绑定：:value + @input

v-model作用于表单元素

自定义组件使用v-model之后，父组件不用再监听子组件的事件触发

.sync语法糖

3. 组件通信

1. 跨层级访问：$emit，组件过多时会很麻烦，vue提供了$root和$parent两个属性（强耦合），访问组件根节点和父节点，父组件通过ref访问子组件

2. 依赖注入：父组件provide对应属性，子组件通过injected去使用provide提供的数据，injected的内部通过$parent往父节点找对应的属性，所以依然还是强耦合

3. 组件二次封装：修改第三方库样式的时候，使用>>>,就可以了，不用再单独开一个style

这是一个对element input的组件的二次封装，vue提供了$attrs和$listeners，方便开发二次封装，这样就不用单独去实现自定义组件的v-model，还有el-input对应的各个方法

4. vue插件

Mixins: 生命周期钩子函数在组件的钩子函数之前执行，methods如果有重名的，使用组件中的method

插件：Vue.use(plugin)

5. vue代码的复用方案：

1. Mixin

2. HOC Hihger order component 函数接收组件作为参数，并返回一个新的组件

3. RenderLess组件

  

   

    

     

    
    

     

      // 带插槽的父组件 SearchWrapper.vue
     
    
   

    

     

    
    

     

      <slot name=
      "searchContent" :data=
      "advanced" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      // 子组件中使用父组件的数据
     
    
   

    

     

    
    

     

      <search-wrapper @search="searchWarehouseAreaList" @reset="resetForm">
     
    
   

    

     

    
    

     

              <a-form-model ref="searchForm"
     
    
   

    

     

    
    

     

                :labelCol="{ span: 5 }"
     
    
   

    

     

    
    

     

                :wrapperCol="{ span: 18, offset: 1 }"
     
    
   

    

     

    
    

     

                :model="searchModel"
     
    
   

    

     

    
    

     

                layout="horizontal"
     
    
   

    

     

    
    

     

                slot="searchContent"
     
    
   

    

     

    
    

     

                slot-scope="scopeData"> // 这里的scopeData.data指向父组件的:data,也就是advanced