子组件向父组件传值$emit

点击子组件的按钮，将子组件的值传递给父组件，并进行提示。

子组件

<template><div><button @click="emitIndex">clickme</button></div>
</template>
<script>
export default {methods: {emitIndex() {//$emit 绑定一个自定义事件, 当这个语句被执行时, 就会将参数 arg 传递给父组件,父组件通过 v-on 监听并接收参数。//returnData:对应父组件的函数名//hello world:传递给returnData函数的值this.$emit('returnData', 'hello world')}}
}
</script>

父组件

 <template><!-- 子组件中$emit绑定的returnData事件 --><childemit @returnData="returnChildData"></childemit>
</template>
<script>
// 引用子组件
import Childemit from './testComponent/childemit.vue'
export default {methods: {//returnChildData：绑定的函数//childStr：子组件传过来的值returnChildData(childStr) {alert('这里是父组件，接收到子组件的值为：' + childStr)}},// 组件注册components: {Childemit}
}
</script>

效果