Vue组件开发学习总结

使用Vue各种ui框架如element-ui，iview可以提供开发效率。但是用别人的手短，有时候它们不能完全满足我们自己的需求。所以就促使我萌生了开发自定义组件的念头。由需求推动学习，重新去vue2的官网查看了组件开发这一节的内容。开始开发一个可拖曳的Modal对话框组件。

组件的构成

首先要了解如何构造一个组件，其实Vue作为spa开发，每一个vue文件都可以看做是一个组件。只不过这里我们说的是更加细微的组件————即页面中的某个部分如：按钮，输入框之类的。

• prop
  • prop用来接收父组件传递给子组件的值，且是由父组件向子组件单向传递的。
  • prop是单向传递的，所以不建议在子组件中手动改变prop的值。如果你这么做了，也不会报错，但是会有一个提示。那么子组件想要prop的话该怎么办呢？请看自定义事件。
  • prop验证：prop可以自定义验证函数来校验prop接收到的值是否满足要求，这一点很有用处，也很自由。
• 自定义事件

  •  事件名称推荐使用kebab-case方式命名,camelCase命名方法会因为HTML大小写不敏感，将大写字母全都转换为小写字母，容易造成一些误会。

  • v-model：一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件。你也可以自定义一个v-model。如：

    Vue.component("demo",{
    
        model:{
            prop: "name"
            event: "input"
        },
        props:{
            name:{
                type:String
            }
        }
    })

    注意：model下面的prop要与props中设置的porp对应。上面的v-model也同样能达到双向绑定的效果

  •  $listeners这个属性目前没有用到，所以等用到后再回来补充。

• 插槽（slot）
  • 插槽使用

    <!-- demo1 -->
    <!-- 组件使用 -->
    <demo>
        hello word   
    </demo>
    
    <!-- demo组件内部 -->
    <div class="demo1">
        <slot></slot>
    </div>
    
    <!-- 渲染后 -->
    <div class="demo1">
        hello word
    </div>

    注释：插槽内可以包含任意的模板代码。

• 具名插槽

  • 组件中可能会用到多个插槽，那么内部出现多个slot标签，又如何将外部的内容放置进你想要放入的slot标签内呢？这时候就需要使用具名插槽。

    ​
    <!-- demo2 -->
    <!-- 组件使用 -->
    <demo2>
        <template slot="header">
            <p>header</p>
        </template>
        <template slot="footer">
            <p>footer</p>
        </template>    
    </demo>
    
    <!-- demo组件内部 -->
    <div class="demo2">
        <slot name="header"></slot>
        <slot name="footer"></slot>
    </div>
    
    <!-- 渲染后 -->
    <div class="demo2">
        <p>header</p>
        <p>footer</p>
    </div>
    
    ​

    具名操作顾名思义，就是要给slot插槽标签赋予一个name。在使用组件的时候，需要配合template标签来给具体名称的slot标签内添加内容，template的slot属性的值应该与组件内容部slot标签中name属性的值一致。这样就可以达到在多个插槽里各自放入对应的内容的目的了。

组件的注册

• 全局注册
• 局部注册

• 
  // 全局注册
  // main.js
      import DemoComponent from "your component path";
      Vue.component("demo",DemoComponent);// 将组件全局注册，并使用demo标签使用。
  
  
  // 局部注册
  // 子页面中注册组件 只有在这个页面内可以使用
      import DemoComponent from "your component path";
      export default{
  
          ...
          components:{
              "demo": DemoComponent
          }
      }
  
    

   

前端框架不能满足需求的情况下，更加热衷于自己开发，如何开发可复用，高质量的组件是我下一阶段的目的。