【vue进阶之旅】如何自定义组件v-model，封装属于自己的组件库？

1.如何自定义组件v-modev?

大家好，我叫东东吖。如何自定义组件v-model，封装属于自己的组件库？很多人并不知道如何自定义封装一个组件，今天我将给大家演示如何封装一个组件，这里我将使用的ViewUI进行二次封装。ViewUI文档：http://www.iviewui.com/view-ui-plus/guide/introduce 。

如何自定义组件v-model，我们首先要考虑的有2点：

一、在父组件中，如何直接使用v-model就可以和子组件进行双向绑定？

二、子组件改变，如何在父组件中获取到子组件的值？

今天我将使用的ViewUI进行二次封装一个名字为fdd-select（意为：方东东-选择器）的组件，因为我的名字就叫方东东，所以今天我们封装一个叫fdd-select的选择器组件。

首先，我们新建一个名字为FddSelect的组件，想要在父组件中，直接使用v-model就可以和子组件进行双向绑定？在子组件中就不能再使用v-mode,子组件直接不能改变父组件传过来的数据，会报错，而是要使用:value="value"这种形式，如果你不是使用的value,而是其他命名如:value="city"，则需要定义model，在model里面定义传过来的值。其次，当子组件改变，如何在父组件中获取到子组件的值，我们可以直接使用子传父，ViewUI的select的改变事件为on-change，我们直接使用它子传父即可。

子组件封装好了后，我们就可以在父组件中使用这个封装好的fdd-selec组件，我们写了一个延迟函数来模拟后端接口数据，把他从父组件通过v-model传给fdd-selec组件，子组件改变，会通过子传父selectChange再次传回父组件。

``` //父组件：

//封装的select组件

```

2.如何封装一个组件？

其实当你实现了上面两个步骤，你就已经理解到封装组件的灵魂所在了，但是如何我们需要控制组件的下拉选项，是否禁用，提示语，怎么办呢?我们可以通过父传子的方法，在子组件里面进行定义，通过父组件传值就可以控制了。

``` fdd-select组件

``` 当然，一个完整的组件属性并不止这些，比如要支持多选等等，大家可以去自己尝试，方式是类似的。

3.如何全局注册一个组件使用？

当组件封装完成之后，我们刚刚还是在局部注册使用的，这样的话，我们每次使用这个组件都要引入注册，而选择器这种组件一般都是比较常用的公共组件，每次都要引入，显得十分麻烦，所以我们需要在全局注册他，然后就可以在项目的任何组件使用了，无需再次引入注册。 ``` //在main.js中全局注册

import FddSelect from '@/components/Common/FddSelect.vue' Vue.component('fdd-select',FddSelect) ```

已上就是如何自定义组件v-model的全部内容，当大家封装的组件比较多和健壮的时候，就形成了属于自己的组件库，比如我自己的就可以起名为fdd-ui组件库。