父子组件 子组件触发事件

父组件向子组件传值通过props

子组件则是通过$emit事件给父组件发送消息

每个Vue实例都实现了事件接口：使用$on(evntName)监听事件；使用$emit(eventName,optionalPayload)触发事件

举个例子：

父组件：components/parent.vue

<template>
    <div class="parent">
        <test-com v-for="(good,index) in goodList" 
         :key="index"
         :good="good"
         :index="index"
         @removeFn="parentRemove"></test-com>
    </div>
</template>
<script>
import testCom from './son'
export default {
    name:'Parent',
    data(){
        return{
            goodList:[
                {name:'哇哈哈0',number:20},
                {name:'哇哈哈1',number:120},
                {name:'哇哈哈2',number:220},
                {name:'哇哈哈3',number:320},
                {name:'哇哈哈4',number:420},
            ]
        }
    },
    components:{
        testCom
    },
    methods:{
        //监听事件
        parentRemove(i){
            this.goodList.splice(i,1)
        }
    }
}
</script>
<style scoped>
 .parentSpan{
     color:#f60
 }
</style>

子组件  components/son.vue

<template>
    <div class="testCom">
        <ul>
            <li>
                <span>{{good.name}}有{{good.number}}箱</span>
                <button  @click="removeIndex">shanchu</button>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
    name:'testCom',
    props:['good','index'],
    methods:{
        //触发事件
        removeIndex(){
            this.$emit('removeFn',this.index)
        }
    }
}
</script>
<style scoped>

</style>