1. secondComponent.vue 在函数里用this.$emit("onEvent",this.message)
sendClickHandle(){
this.$emit("onEvent",this.message)
}
<template>
<h3> 自定义传递数据</h3>
<button @click="sendClickHandle">点击传递</button>
</template>
<script>
export default{
name: 'SecondComponent',
data(){
return{
message:"我是secondComponent的数据"
}
},
methods:{
sendClickHandle(){
this.$emit("onEvent",this.message)
}
}
}
</script>
2. app.vue在template里用onEvent
<SecondComponent @onEvent="getDataHandle"/>
<template>
<SecondComponent @onEvent="getDataHandle"/>
<div> {{ title }}</div>
</template>
<script>
import SecondComponent from './components/SecondComponent.vue';
export default {
name: 'App',
data(){
return{
title:"我是标题66666666"
}
},
components: {
SecondComponent
},
methods:{
getDataHandle(data){
this.title = data;
}
}
}
</script>