小节组件的 Props 与事件

在 Vue.js 中，组件是构建用户界面的基础。想要有效地传递数据和响应事件，props 和自定义事件是不可或缺的工具。本节将详细探讨如何使用组件的 props 和事件。

1. 什么是 Props？

props（属性的缩写）允许父组件向子组件传递数据。这种数据传递是单向的：父组件可以向子组件传递数据，但子组件不能直接修改这些数据。

1.1 定义 Props

在组件中定义 props 很简单，可以在组件的选项中添加一个 props 数组或对象。例如：

Vue.component('my-component', {
  props: ['title', 'count'],
  template: '<h1>{{ title }}: {{ count }}</h1>'
});

在上面的例子中，my-component 接受两个 props：title 和 count。

1.2 使用 Prop

在父组件中使用子组件，并传递props，示例如下：

<my-component title="Hello Vue" :count="10"></my-component>

在这一行中，title 是一个字符串，而 count 是一个动态的 JavaScript 表达式。

1.3 Prop 的类型验证

为了确保传递到子组件的数据类型正确，可以在 props 中定义类型。例如：

Vue.component('my-component', {
  props: {
    title: {
      type: String,
      required: true
    },
    count: {
      type: Number,
      default: 0
    }
  },
  template: '<h1>{{ title }}: {{ count }}</h1>'
});

在这里，title 是必需的且必须是字符串，count 是可选的，默认为 0。

2. 事件处理

在 Vue.js 中，父组件可以通过子组件的自定义事件来接收子组件的消息和操作。

2.1 触发自定义事件

在子组件中使用 $emit 方法触发事件。例如：

Vue.component('my-button', {
  template: '<button @click="handleClick">Click me</button>',
  methods: {
    handleClick() {
      this.$emit('button-clicked', 'Hello from child!');
    }
  }
});

在这个例子中，点击按钮时会触发名为 button-clicked 的事件，并将字符串 'Hello from child!' 作为参数传递。

2.2 监听自定义事件

在父组件中，可以使用 v-on 指令或 @ 别名来监听子组件触发的事件:

<my-button @button-clicked="handleChildClick"></my-button>

new Vue({
  el: '#app',
  methods: {
    handleChildClick(message) {
      console.log(message); // 输出：Hello from child!
    }
  }
});

2.3 组合使用 Props 与事件

通常情况下，父组件通过 props 传递数据给子组件，同时通过事件接收子组件的消息。例如：

<div id="app">
  <my-component :title="message" :count="count" @update-count="updateCount"></my-component>
</div>

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue',
    count: 0
  },
  methods: {
    updateCount(newCount) {
      this.count = newCount;
    }
  }
});

在这个综合示例中，my-component 通过 props 接收 title 和 count，同时通过 update-count 事件向父组件发送更新后的计数。

3. 小结

在 Vue.js 中，props 和自定义事件是实现组件间通信的主要方式。

• Props：用于父组件向子组件传递数据，具有单向数据流的特性。
• 自定义事件：允许子组件向父组件发送消息，通常用于通知父组件发生了某些事件或改变。

通过理解和灵活使用 props 和事件，可以构建出更加复杂和灵活的 Vue.js 应用。