编程小白入门分享五：Vue的自定义组件

前言

---

上篇博客简单介绍了vue，本篇博客要在对vue有一定了解后，才可以比较容易理解自定义组件。想要封装好一个组件，一定要熟练掌握这三个技能，父组件 —> 子组件传值（props）、子组件 —> 父组件传值（$emit）、以及插槽（slot）；对于一个独立的组件来说，props是用来为组件内部注入核心的内容；$emit用来使这个独立的组件通过一些逻辑来融入其他组件中。举个具体点的例子，假如你要做一辆车，车轮是要封装的一个独立组件，props指的就是根据整个车的外形你可以给轮子设置一些你想要的且符合车风格的花纹，图案等；而$emit的作用则是让这些轮子能够和整辆车完美契合的运作起来。

子组件封装

---

举个例子：

export default {
  //自定义组件的名字
  name: 'PaperView',
    //接收父组件传来的参数
    props: {
      pageShow: {
      type: Object,
      required: true
    }
  }
}

父组件调用

---

//在template使用组件
<paper-view :page-show="paperDetailDialog"  />

//在script引入试卷详情组件
import PaperView from "@/views/paper_service/PaperViewPart/PaperView/index.vue"
export default {
  name: "PaperMaintain",
  components:{PaperView},

这样就完成了最简单的组件调用，顺便一提，父组件传的值越多，子组件的耦合就越低。

方法调用

---

父组件参数加

//再定义一个方法接showChange
<paper-view :page-show="paperDetailDialog"  @show-change="showChange" />

子组件参数加

watch: {
    pageShow(val) {
      this.pageShowCache = val
    }
}

这样就可以简单的函数回调了，今后有机会还会再详细介绍一下回调方法的使用。