北京百思可瑞教育：Vue.js基础，监听子组件事件（v-on）与绑定子组件数据（v-model）

<!-- 父组件 -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: { ChildComponent },
  methods: {
    handleCustomEvent(payload) {
      console.log('收到子组件数据:', payload);
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="notifyParent">通知父组件</button>
</template>

<script>
export default {
  methods: {
    notifyParent() {
      this.$emit('custom-event', { message: '来自子组件的数据' });
    }
  }
}
</script>

<!-- 阻止按钮点击事件冒泡到父元素 -->
<button @click.stop="handleClick">Click Me</button>

<!-- 阻止表单提交的默认跳转行为 -->
<form @submit.prevent="handleSubmit">
  <input type="submit" value="提交">
</form>

<!-- 事件仅触发一次 -->
<button @click.once="handleOnce">一次性按钮</button>

<!-- 动态事件名绑定 -->
<ChildComponent @[dynamicEvent]="handleDynamicEvent" />

<!-- 传递事件对象与自定义参数 -->
<button @click="handleParam('hello', $event)">带参点击</button>

<script>
export default {
  data() {
    return { dynamicEvent: 'click' };
  },
  methods: {
    handleParam(msg, event) {
      console.log(msg, event.target); // 输出: "hello" <button>
    }
  }
}
</script>

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

// 组件A（发送事件）
import { EventBus } from './event-bus';
EventBus.$emit('global-event', { data: '跨组件消息' });

// 组件B（接收事件）
import { EventBus } from './event-bus';
EventBus.$on('global-event', (payload) => {
  console.log(payload.data); // 输出: "跨组件消息"
});

beforeUnmount() {
  EventBus.$off('global-event', this.handler);
}

<!-- 父组件 -->
<template>
  <CustomInput v-model="message" />
  <p>Message: {{ message }}</p>
</template>

<script>
import CustomInput from './CustomInput.vue';
export default {
  components: { CustomInput },
  data() {
    return { message: 'Hello Vue!' };
  }
}
</script>

<!-- 子组件 -->
<template>
  <input 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['modelValue'] // Vue 3默认属性名
}
</script>

<!-- 父组件：使用v-model:title绑定 -->
<CustomComponent v-model:title="pageTitle" />

<!-- 子组件：触发update:title事件 -->
<template>
  <input 
    :value="title" 
    @input="$emit('update:title', $event.target.value)"
  />
</template>

<script>
export default {
  props: ['title']
}
</script>

<!-- Vue 2的.sync语法 -->
<ChildComponent :value.sync="parentData" />

<!-- 等效的Vue 3实现 -->
<ChildComponent v-model:value="parentData" />

<!-- 父组件 -->
<template>
  <CounterComponent :count="num" @update:count="num = $event" />
</template>

<script>
import CounterComponent from './CounterComponent.vue';
export default {
  components: { CounterComponent },
  data() {
    return { num: 0 };
  }
}
</script>

<!-- 子组件 -->
<template>
  <button @click="increment">增加计数</button>
</template>

<script>
export default {
  props: ['count'],
  methods: {
    increment() {
      this.$emit('update:count', this.count + 1);
    }
  }
}
</script>

// 子组件
export default defineComponent({
  props: {
    modelValue: {
      type: String as PropType<string>,
      required: true
    }
  },
  emits: {
    'update:modelValue': (value: string) => true
  }
});