Vue子组件调用父组件的三种方法(附详细代码演示)

<!-- 父组件 Parent.vue -->
<template>
  <Child @show-message="handleMessage" />
</template>

<script>
export default {
  methods: {
    handleMessage(msg) {
      console.log('收到子组件消息:', msg)
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendMessage">发送消息</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('show-message', 'Hello from Child!')
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child :callback="handleCallback" />
</template>

<script>
export default {
  methods: {
    handleCallback(data) {
      console.log('回调数据:', data)
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<template>
  <button @click="executeCallback">执行回调</button>
</template>

<script>
export default {
  props: ['callback'],
  methods: {
    executeCallback() {
      this.callback({ status: 'success' })
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child v-model="message" />
  <!-- 或 -->
  <Child :visible.sync="dialogVisible" />
</template>

<script>
export default {
  data() {
    return {
      message: '',
      dialogVisible: false
    }
  }
}
</script>

<!-- 子组件 Child.vue -->
<script>
export default {
  props: ['value'], // v-model默认prop
  methods: {
    updateValue() {
      this.$emit('input', 'new value')
    },
    closeDialog() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <Child v-model:message="msg" />
</template>

<!-- 子组件 Child.vue -->
<script setup>
const props = defineProps(['message'])
const emit = defineEmits(['update:message'])

const update = () => {
  emit('update:message', 'new value')
}
</script>