第三步:组件化

组件是 Vue 最重要的特性。简单来说,任何 Vue 实例都可以视作组件;一个组件可以由多个组件组合而成;所以一个应用,无论规模,都可以视作若干个组件组成的整体。

为了接下来的内容,我建议你先读完 Vue 组件的文档

组件的目的是提高代码的复用性。举个例子,前面我们实现了 Modal 组件的 Vue 化,似乎蛮简单的,效果还不错。但是当另一个页面当中也需要这样的 Modal,麻烦就来了。完全复制一遍当然可以,但这明显不是最好的做法。

这种时候,我们就该把它做成组件。因为整个产品框架仍然处于混合运行的状态,所以单文件组件 暂时还不容易接入,我们还是选择全局组件吧。

Vue.component('my-modal', {
  template: '',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShowClass: false,
      result: null,
      message: ''
    }
  }
  methods: {
    submit(event) {
      // 提交
    },
    show() {
      this.isShow = true;
    },
    hide() {
      this.isShow = false;
    },
    close() {
      this.isShowClass = false;
    }
  },
  watch: {
    isShow(value) {
      setTimeout(() => {
        this.nextShow = value;
      }, 50);
    }
  }
})

为防止你没有仔细阅读文档,我还是把一些要点提一下。首先,注册全局组件要用 Vue.component 方法,注册出来的组件通过在 HTML 里写标签来使用,如:

<my-modal>

</my-modal>

其次,组件的 data 属性必须是一个函数,然后返回一个包含要用到数据的对象。

最后,任何组件在用的时候都会变成“子组件”,所以这个时候向它传值必须通过 prop 属性。在我们的例子中,负责控制 Modal 显示/隐藏的属性是 isShow,原先通过 modal.isShow = true; 即可将它弹出。如今我们需要把它暴露给父组件,所以放在 props 里。

接下来,我还要调整一下它的模板。既然是组件,必须考虑复用,所以内部表单肯定不能写死了。Vue 给我们提供了 Slot(插槽)作为插入外部内容的手段,所以模板可以改成这样:

<!-- 前面不变 -->
<div class="modal-body">
  <slot @submit.prevent="submit"></slot>
</div>
<!-- 后面也不变 -->

模板可以放在任何地方,比如统一堆在 index.html 里面,用 <script type="text/x-template"></script> 包裹;也可以写在组件的 template 属性里,只要能访问到,都不是问题。

这样,我们就可以在别的地方使用这个 Modal 组件了:

<div class="随便什么容器" id="some-vue-app">
  <my-modal @saved="onModalSaved">
    <form action="/api/some/" method="post">
      <!-- 表单内容 -->
    </form>
  </my-modal>
</div>

不过使用 Vue 组件的一定是其它 Vue 实例,如果要混合使用的话,也要用 Vue 实例作为中介。

results matching ""

    No results matching ""