Vue 传递属性

在Vue中，可以通过属性（Props）将数据从父组件传递到子组件。父组件可以通过在子组件上使用 v-bind 将数据绑定到组件的属性上。

使用 Props

父组件可以使用以下语法将数据传递给子组件：

<child-component :prop-name="data"></child-component>

其中，prop-name 是子组件的属性名，data 是数据，可以是任何 JavaScript 表达式。

在子组件中，可以通过 props 选项声明接收数据的属性。如下所示：

Vue.component('child-component', {
  // 声明 props
  props: ['prop-name'],
  // ...
})

现在，子组件就可以在模板中使用 prop-name 属性了。

<template>
  <div>
    {{ propName }}
  </div>
</template>

向子组件传递静态值

在传递属性时，可以传递静态值。

<child-component message="Hello!"></child-component>

Vue.component('child-component', {
  props: ['message']
})

在子组件中可以通过 this.message 访问传递的值。

验证 Props

我们可以验证 Props 是否合法。例如，我们可以验证一个 Props 必须是字符串类型。

Vue.component('child-component', {
  props: {
    message: String // 声明 props 为字符串类型
  }
})

如果提供了非法的值，Vue 将会发出警告。

非 Prop 的特性

在使用自定义组件时，非 Prop 的特性将被添加到根元素上。例如，

<child-component foo="bar"></child-component>

在子组件中，你无法直接通过 this.foo 访问到 "bar"。相反，你应该在组件中设置 $attrs 属性。

<template>
  <div>
    {{ $attrs.foo }} <!-- 输出 "bar" -->
  </div>
</template>

总结

通过 Props 实现组件之间的通信是 Vue 中的一个基本概念。我们可以通过验证 Props 是否合法，确保应用的稳定性和可维护性。同时，我们还可以使用 $attrs 获取非 Prop 的特性。