vue传值 ---- >> 子传父，$emit()

划重点：

　　$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。

 

子组件：

 

<template>
<div>
    <!-- <div>子页面</div> -->
    <div class="mess">
        <div  v-for="(item,index) in message" :key="index">
            {{item.id}}  
        </div>
    </div>
    <div>
        <button @click="addFont()"> 点击+ </button>
        <button @click="minus()"> 点击- </button>
    </div>
</div>
</template>
<script>
export default {
    name:"shopping",
    props: {
        message:{
            type : Array,
            default: function() {
               return []
             }
        },
    },
    data() {
        return {
            fontSize:0,
        }
    },
    methods: {
        addFont(){
            if(this.fontSize <= 0){
                this.fontSize =1 ; 
            }else{
                this.fontSize++;
            }
            this.$emit('addnum',this.fontSize);
        },
        minus(){
            if(this.fontSize <= 0){
                this.fontSize = 0
            }else{
                this.fontSize--
            }
            this.$emit('minusNum', this.fontSize);
        }
    },
}
</script>

$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件

 

父组件：

 

<template>
    <div class="comment">
        <div>comment</div>
        <div class="btn">
            <router-link :to='{name:"shopping", query: { id: userID}}' @click="tiao()" tag="span" >跳转</router-link>
        </div>
        <div class="num">{{num}}</div>
        <shopping :message="HelloWorld" @addnum='addNum' @minusNum="minusNum"></shopping>
    </div>
</template>
<script>
import shopping from '../shopping/shopping'
export default {
    name:"comment",
    components:{shopping},
    data() {
        return {
            userID:1,   
            num:0,
            HelloWorld:[
                { id:"a"},
                {id:"b"},
                {id:"c"},
            ]
        }
    },
    methods: {
        addNum(data){
            this.num = data
        },
        minusNum(data){
            this.num = data
        }
    },
}
</script>

父组件通过@event监听并接收参数。