[学习笔记]Vue自定义组件——传值，插槽的使用

用了这么久的vant和element，我这个小白也简单地了解了别人的组件是怎么写出来的，特此记录一下。

举个简单的例子，拿自己定义的mainTitle举例，这个组件用在商城顶部的标题，分成三块，最左侧是返回键←，中间是标题内容，最右侧是退回主页×。

html代码如下（利用了vant组件）

<template>
  <div>
    <van-sticky class="maintitle">  //vant粘性布局
      <van-row>  //vant layout布局
        <van-col span="4" v-show="left" @click="back"> //最左侧返回键占比4
          <van-icon name="arrow-left" size="20" />
        </van-col>
        <van-col span="16"> //中间标题占比16
          <slot name="title"> //自定义插槽
            {
  {mainTitle}} //若自定义插槽内容为空，则显示mainTitle
          </slot>
        </