子组件事件传递给父组件
- 父组件
<template>
....
<diyItemAdd @delDiyItemCall="delDiyItem" :itemInfo="item" v-for="(item,index) in jl_content_form.diyItem" :key="item.itemID"></diyItemAdd>
...
<template>
<script>
methods: {
delDiyItem(e){
console.log(e)
// debugger
},
</script>
html中,需要给子组件的属性中注册一个事件@delDiyItemCall="delDiyItem"
,用于子组件触发
这里delDiyItem是父组件的方法,子组件在触发事件的时候,会调用父组件的这个方法
@delDiyItemCall
这个是给子组件注册事件的作用
- 子组件(diyItemAdd)
<template>
<view >
<button class="cu-btn bg-blue light" size="mini" @click="del" >删除</button>
</view>
</template>
<script>
methods:{
del(){
this.$emit("delDiyItemCall",this.itemInfo.itemID)
}
}
</script>
子组件中 @click 是子组件button的点击事件。这里指向了子组件的del()方法
在del()方法中,通过 this.$emit("父组件引用时,注册的事件名字","相关参数")
来触发父组件的注册事件。
上面的子组件通过按钮button 点击后,执行了父组件的delDiyItem()方法