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

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

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

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

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)
                }
              },

在父组件中使用：

2、 

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

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

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

//父组件传递allback事件

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

3、插槽

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

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

         //中间标题占比16
           //自定义插槽
            {
    {mainTitle}} //若自定义插槽内容为空，则显示mainTitle
          
        

父组件中利用