vue子组件传值给父组件$emit，slot以及function形式传值

1，方法1

this.$emit('事件名称',传的值)

2，通过父组件传值给子组件值方法，子组件通过该方法将值传给父组件，下面贴代码方便理解

子组件内

<template>
        <mescroll-vue ref="mescroll" :down="mescrollDown" :up="mescrollUp" @init="init" class="margin-footer margin-header">
            <slot :dataList="dataList"></slot>
        </mescroll-vue>
</template>

<script>
    import MescrollVue  from 'mescroll.js/mescroll'
    export default {
        name: "ScrollList",
        components:{
            MescrollVue
        },
        data(){
            return {
                mescroll:null,
                mescrollDown:{
                    auto:true
                },
                mescrollUp:{
                    callback: this.upCallback,
                },
                dataList:[],
            }
        },
        props:{
            apiUrl:{
                type:String,
                required: true,
            },
            apiParams: {
                type: Object,
                default() {
                    return {}
                },
            },
            dealData:{
                type:Function
            }
        },
        beforeRouteEnter(to,from,next){
            next(vm=>{
                vm.$refs.mescroll.beforeRouteEnter()
            })
        },
        beforeRouteLeave (to, from, next) { // 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
            this.$refs.mescroll.beforeRouteLeave() // 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
            next()
        },
        methods:{
            // mescroll组件初始化的回调,可获取到mescroll对象
            init (mescroll) {
                this.mescroll = mescroll
            },

            // 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
            upCallback (page, mescroll) {
                Object.assign(this.apiParams,{ page: page.num,per_page: page.size})
                this.$get(this.apiUrl,this.apiParams).then(({data})=>{
                    // 如果是第一页需手动制空列表
                    if (page.num === 1) this.dataList = []
                    // 把请求到的数据添加到列表
                    this.dataList = this.dataList.concat(data)
                    // 当父组件要用到里面的数据传值格式
                    // 传值格式1 父组件传方法值给子组件，子组件通过方法传值给父组件
                    if (this.dealData) {
                        this.dataList = this.dealData(this.dataList)
                    }
                    // 传值格式2，vue的$emit传值
                        this.$emit('deal-data',this.dataList)
                    // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(data.length)
                    })
                })
            },
            reload(){
                this.dataList=[];
                this.$refs.mescroll.resetUpScroll()
            }
        }

    }
</script>

<style scoped lang="stylus">
    @import "../assets/variable.styl"

    .mescroll
        position absolute
        bottom 0
        top 0
        height auto

    .margin-header
        margin-top $headHeight

    .margin-footer
        margin-bottom $footerHeight

</style>

下面是父组件接收值

<template>
    <scroll-list :api-url="apiUrl" :api-params="apiParams" :deal-data="dealData" @deal-data="dealData">
        <template slot-scope="data">
            <cart-item @select-cart="selectItem"  v-for="item in data.dataList"
                       :img="item.goods.thumbnail"
                       :price="item.goods.buy_price"
                       :title="item.goods.name"
                       :item-id="item.goods_id"
                       :quantity="item.quantity">

            </cart-item>
        </template>
    </scroll-list>

</template>

<script>
    import CartItem from "./CartItem";
    import ScrollList from "../../components/ScrollList";
    import {API} from "../../const";
    export default {
        name: "List",
        components: {ScrollList, CartItem},
        data(){
            return{
                apiUrl:API.CART.LIST,
                apiParams: {expand:'goods'}
            }
        },
       methods:{
           selectItem(id){
               console.log(id)
           },
           dealData(data){
               console.log(data)
               return data
           }
       }
    }
</script>

<style scoped>

</style>

下面进行说明

利用function方式以及$emitfangshi :子传值主要在

利用function方式以及$emitfangshi:接收值主要在

利用function方式以及$emitfangshi:处理值

利用slot方式

slot-scope接收值

slot传值参考：https://cn.vuejs.org/v2/guide/components-slots.html#%E8%A7%A3%E6%9E%84-slot-scope