点击子组件的按钮,将子组件的值传递给父组件,并进行提示。
子组件
javascript
<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>
父组件
javascript
<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>