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

杜都督丶

于 2020-11-04 11:37:22 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：商城项目练习文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/iufesjgc/article/details/109484832

本文是一篇关于Vue自定义组件的学习笔记，通过一个简单的mainTitle组件示例，介绍了如何通过props传值，以及如何利用$emit触发父组件事件。同时，文章还探讨了插槽的使用，允许在组件内部自定义特定区域的内容，以实现更灵活的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用了这么久的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>
        </van-col>
        <van-col span="4" v-show="right"> //右侧×占比4
          <slot name="right">
            <van-icon name="cross" size="20" @click="allback"/>