vue自定义事件用法及$emit

子组件

<template>
<button @click="handle">自定义事件</button>
</template>

<script>
export default{
data(){
return{
message:"我子组件"
}
},
methods:{
handle(){
this.$emit("onEvent",this.message)
}
}
}
</script>

父组件

<template>
<MyComponent :title="title" :nelist="nelist" @onEvent="sow"/>
<p >{{message}}</p>
</template>

<script>
import MyComponent from "./components/MyComponent.vue"
export default{
name:"app vue",
data(){
return{
title:"我是参数",
nelist:[1,2,3],
message:""
}
},
components:{
MyComponent
},
methods:{
sow(data){
console.log(data)
this.message=data
}
}
}
</script>

文章来自 96net.com.cn