4. Props属性
Props属性是Vue中用于父子组件之间传递数据的一种方式。在本节中，我们将介绍父子组件之间传递数据的方式、Props的类型检查和默认值设置，以及动态Props和Prop验证的相关内容。
父子组件之间传递数据的方式
父组件可以通过Props向子组件传递数据。在父组件中，可以使用v-bind指令将数据绑定到子组件的Props上。子组件可以在模板中使用这些Props来显示数据或执行其他操作。
下面是一个简单的示例：
// 父组件 <template> <child-component :message="parentMessage"></child-component> </template> <script> export default { data() { return { parentMessage: 'Hello from parent' }; } }; </script> // 子组件 <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] }; </script>
在上述示例中，父组件通过v-bind指令将parentMessage绑定到子组件的message Props上。子组件可以在模板中使用message来显示父组件传递的数据。
Props的类型检查和默认值设置
为了确保传递给子组件的Props具有正确的类型，Vue提供了对Props进行类型检查的功能。可以通过在子组件中使用props选项来定义Props的类型，并使用type属性指定类型。
下面是一个示例：
// 子组件 <template> <div>{{ count }}</div> </template> <script> export default { props: { count: { type: Number, required: true } } }; </script>
在上述示例中，我们定义了一个名为count的Props，并指定其类型为Number。通过设置required: true，我们要求父组件必须传递该Props。
此外，我们还可以为Props设置默认值，以防止父组件未传递该Props时出现错误。可以使用default属性来设置默认值。
下面是一个示例：
// 子组件 <template> <div>{{ message }}</div> </template> <script> export default { props: { message: { type: String, default: 'Default message' } } }; </script>
在上述示例中，如果父组件未传递message Props，则子组件将显示默认值'Default message'。
动态Props和Prop验证
除了静态地绑定Props之外，我们还可以使用动态Props来根据父组件的数据动态更新Props。可以使用冒号语法或计算属性来实现动态Props的绑定。
下面是一个示例：
// 父组件 <template> <child-component :message="dynamicMessage"></child-component> </template> <script> export default { data() { return { dynamicMessage: 'Hello from parent' }; } }; </script> // 子组件 <template> <div>{{ message }}</div> </template> <script> export default { props: ['message'] }; </script>
在上述示例中，父组件的dynamicMessage属性是动态的，当其值发生变化时，子组件的Props也会相应地更新。
此外，Vue还提供了Prop验证的功能，可以通过validator属性来定义一个自定义的验证函数，对传递给子组件的Props进行验证。
下面是一个示例：
// 子组件 <template> <div>{{ count }}</div> </template> <script> export default { props: { count: { type: Number, validator(value) { return value >= 0; } } } }; </script>
在上述示例中，我们定义了一个名为count的Props，并使用validator属性定义了一个自定义的验证函数。该函数返回true表示验证通过，否则表示验证失败。
5. 事件处理
在Vue中，你可以在组件中触发和监听事件，实现组件之间的通信。本节将介绍如何在组件中触发和监听事件，以及自定义事件和父子组件之间的事件通信。此外，还会介绍事件修饰符和按键修饰符的使用。
在组件中触发和监听事件
在Vue中，你可以使用$emit方法在组件中触发事件，并使用v-on指令或简写符号@来监听事件。
下面是一个示例：
// 子组件 <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { this.$emit('custom-event', 'Hello from child'); } } }; </script> // 父组件 <template> <child-component @custom-event="handleCustomEvent"></child-component> </template> <script> export default { methods: { handleCustomEvent(message) { console.log(message); // 输出：'Hello from child' } } }; </script>
在上述示例中，子组件中的按钮被点击时，通过$emit方法触发了一个名为custom-event的自定义事件，并传递了一个消息作为参数。父组件使用v-on指令或简写符号@来监听该事件，并在回调函数中接收到子组件传递的消息。
自定义事件和父子组件之间的事件通信
除了使用内置的DOM事件，你还可以自定义事件来实现组件之间的通信。在Vue中，你可以使用$on方法监听自定义事件，并使用$emit方法触发自定义事件。
下面是一个示例：
// 子组件 <template> <button @click="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { this.$emit('custom-event', 'Hello from child'); } } }; </script> // 父组件 <template> <child-component></child-component> </template> <script> export default { mounted() { this.$refs.child.$on('custom-event', this.handleCustomEvent); }, beforeDestroy() { this.$refs.child.$off('custom-event', this.handleCustomEvent); }, methods: { handleCustomEvent(message) { console.log(message); // 输出：'Hello from child' } } }; </script>
在上述示例中，子组件通过$emit方法触发了一个名为custom-event的自定义事件，并传递了一个消息作为参数。父组件使用$on方法监听该自定义事件，并在回调函数中接收到子组件传递的消息。需要注意的是，在父组件中使用$refs来引用子组件，并在适当的生命周期钩子函数中添加和移除事件监听器。
事件修饰符和按键修饰符的使用
Vue提供了事件修饰符和按键修饰符，用于处理特定的事件行为。
事件修饰符
事件修饰符是通过在事件监听器后面加上.来表示的。常用的事件修饰符有.stop、.prevent、.capture和.once。
- .stop：阻止事件冒泡。
- .prevent：阻止默认事件。
- .capture：使用事件捕获模式而不是冒泡模式。
- .once：只触发一次事件。
下面是一个示例：
<template> <button @click.stop="handleClick">Click me</button> </template> <script> export default { methods: { handleClick() { console.log('Button clicked'); } } }; </script>
在上述示例中，使用.stop修饰符阻止了事件冒泡，即点击按钮时不会触发父元素的点击事件。
按键修饰符
按键修饰符是通过在事件监听器后面加上.key来表示的。常用的按键修饰符有.enter、.tab、.delete和.esc等。
下面是一个示例：
<template> <input @keyup.enter="handleEnterKey" /> </template> <script> export default { methods: { handleEnterKey() { console.log('Enter key pressed'); } } }; </script>
在上述示例中，使用.enter修饰符监听了输入框的回车键按下事件，当用户按下回车键时，会触发handleEnterKey方法。
