技术使用点二

[二、model 的使用]

默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。所以当我们在一个自定义组件上使用 v-model 并不能实现双向绑定，因为自定的组件并没有默认的 value 和 input 事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model 选项就派上用场了，在定义组件的时候，指定 prop 的值和监听的事件。

示例：

[三、props 的使用]

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。 你可以基于对象的语法使用以下选项：

• type：可以是下列原生构造函数中的一种：String 、Number、 Boolean、 Array、 Object、 Date、 Function、 Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。Prop 类型的更多信息在此。

• default：any

• 为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

• required：Boolean

• 定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。

• validator：Function

• 自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

props 在组件开发中的示例：

组件内部接收父组件的属性

父组件传递属性：

[四、$attrs 的使用]

• 只读

• 包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs"传入内部组件——在创建高级别的组件时非常有用。

示例：

[五、$listeners 的使用]

• 只读

• 包含了父作用域中的 (不含.native 修饰器的)v-on 事件监听器。它可以通过 v-on="$listeners"传入内部组件——在创建更高层次的组件时非常有用。

[六、$emit 的使用]

• this.$emit（'自定义事件名',要传送的数据）；

• 触发当前实例上的事件。附加参数都会传给监听器回调。

在父组件监听回调：

[七、$on 的使用]

• VM.$on{(}^{\prime }事件{名}^{\prime },callback)---callback回调$emit 要传送的数据；

• 监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。