[学习笔记]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>
        </van-col>
        <van-col span="4" v-show="right"> //右侧×占比4
          <slot name="right">
            <van-icon name="cross" size="20" @click="allback"/>
          </slot>
        </van-col>
      </van-row>
    </van-sticky>
  </div>
</template>

1、传值

最基础的用法了，在组件内利用props接收父组件传递过来的值。

     props:{
            mainTitle:{ //传递进来的标题
                type:String,
                default(){
                    return ''
                }
            },
            leftpath:{ //点击返回键后的路径，默认-1，在back()中使用
                type:String,
                default(){
                    return '-1'
                }
            },
            rightpath:{ //点击×后的路径，默认/home
                type:String,
                default(){
                    return '/home'
                }
            },
            left:{ //是否显示返回键
                type:Boolean,
                default(){
                    return true //默认显示
                }
            },
            right:{ //是否显示×
                type:Boolean,
                default(){
                    return true //默认显示
                }
            }
        },

       //返回键的methods
       back(){
                if(this.leftpath === '-1'){
                    this.$router.back()
                }else{
                    this.$router.push(this.leftpath)
                }
              },

在父组件中使用：

<main-title mainTitle="我的商圈" :right="false" leftpath="/live"></main-title>

2、

若想要返回键或者×键设置其他点击功能，可利用$emit接收父组件事件

比如我希望这个弹出层内mainTitle的×的功能是弹出层隐藏而不是路由变化

扫描二维码关注公众号，回复： 12657908 查看本文章

    //子组件allback方法
    allback(){
                if(this.$listeners['allback']){ //判断父组件是否传递了事件
                  this.$emit('allback') //是则执行该事件
                }else{
                  this.$router.replace(this.rightpath) //否则默认为退回到某路径
                }
              },

//父组件传递allback事件
<main-title mainTitle="修改资料" @allback="popupShow"></main-title>

//methods
popupShow(){
  this.popupIsShow = false
}

3、插槽

插槽也是自定义组件常用功能，可以自定义组件内某一部分的东西，比如我希望可以在中间标题部分使用Tab标签。

子组件中，首先对你需要自定义的部分添加<slot>具名插槽，在父组件中若没有使用插槽或者插槽内容为空，则不会替换子组件中插槽内的内容

        <van-col span="16"> //中间标题占比16
          <slot name="title"> //自定义插槽
            {
   
   {mainTitle}} //若自定义插槽内容为空，则显示mainTitle
          </slot>
        </van-col>

父组件中利用<template>自定义插槽内容

        <main-title :right="false">
            <template slot="title">
                <div class="tabs"> //tab标签
                    <van-tabs v-model="active">
                        <van-tab title="关注"></van-tab>
                        <van-tab title="推荐"></van-tab>
                    </van-tabs>
                </div>
            </template>
        </main-title>

初学者，还用很多东西有待了解和开发，欢迎指正~

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

猜你喜欢