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

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

<!-- 子組件 Child.vue -->
<template>
  <button @click="sendMessage">發(fā)送消息</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('回調(diào)數(shù)據(jù):', data)
    }
  }
}
</script>

<!-- 子組件 Child.vue -->
<template>
  <button @click="executeCallback">執(zhí)行回調(diào)</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>