MyComponent.vue
<template>
<h3>子组件向父组件传递数据</h3>
<!-- 绑定一个函数 -->
<button @click="sendHandle">发送数据</button>
</template>
<script>
export default {
name:"MyComponent",
methods:{
sendHandle(){
// $emit:用于自定义事件
// 自定义事件名称:参数1: 理论上任意取值, 有意义就好, 用于父组件接收时使用
// 自定义返回值:参数2: 传递的参数
this.$emit("onCustom","子组件传递的参数")
}
}
}
</script>
App.vue
<template>
<img alt="Vue logo" src="./assets/logo.png">
<!-- 子组件传递的参数1 getData会接收到参数2作为参数-->
<my-component @onCustom="getData"/>
<p>{{messge}}</p>
</template>
<script>
import MyComponent from './components/MyComponent.vue'
export default {
name: 'App',
components: {
MyComponent
},
methods:{
getData(data){
console.log(data);
this.messge = data;
}
},
data(){
return{
messge:''
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>