图解点击按钮实现子父传值

子组件源码

<template>
  <div class="newa">
  <button @click="handleClick">点击触发事件</button>
  </div>
</template>
<script>
export default {
  name: 'NewA',
  props: {
    msg: String
  },
  methods: {
    handleClick() {
      this.$emit('custom-event', 'hello world')
    }
  }
}
</script>

父组件源码

<template>
  <div class="about">
    <NewA v-on:custom-event="handleCustomEvent" />
    <div>{{ message }}</div>
  </div>
</template>
<script>
import NewA from '@/components/NewA.vue'
export default {
  name: 'AboutView',
  components: {
    NewA
  },
  data() {
    return {
      message: ''
    }
  },
  methods: {
    handleCustomEvent(a) {
      // 接收来自子组件传递的数据，并更新 message 数据
      this.message = a;
      // console.log(a);
    }
  }
}
</script>

运行结果

解析